开发者社区> 西北野狼> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

前端学习 -- Css -- 浮动

简介: 块元素在文档流中默认垂直排列,所以这个三个div自上至下依次排开,如果希望块元素在页面中水平排列,可以使块元素脱离文档流。 使用float来使元素浮动,从而脱离文档流 可选值: none,默认值,元素默认在文档流中排列。
+关注继续查看


块元素在文档流中默认垂直排列,所以这个三个div自上至下依次排开,如果希望块元素在页面中水平排列,可以使块元素脱离文档流。
使用float来使元素浮动,从而脱离文档流
可选值:

  1. none,默认值,元素默认在文档流中排列。
  2. left,元素会立即脱离文档流,向页面的左侧浮动。
  3. right,元素会立即脱离文档流,向页面的右侧浮动。


当为一个元素设置浮动以后(float属性是一个非none的值),元素会立即脱离文档流,元素脱离文档流以后,它下边的元素会立即向上移动;
元素浮动以后,会尽量向页面的左上或这是右上漂浮,直到遇到父元素的边框或者其他的浮动元素;
如果浮动元素上边是一个没有浮动的块元素,则浮动元素不会超过块元素;
浮动的元素不会超过他上边的兄弟元素,最多最多一边齐;

浮动的元素不会盖住文字,文字会自动环绕在浮动元素的周围,所以我们可以通过浮动来设置文字环绕图片的效果;

在文档流中,子元素的宽度默认占父元素的全部;

开启span的浮动,内联元素脱离文档流以后会变成块元素。

w3school上面有比较具体的讲解:http://www.w3school.com.cn/css/css_positioning_floating.asp

demo:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            /*默认值。元素不浮动,并会显示在其在文本中出现的位置。*/
            .box4{
                width: 100px;
                height: 100px;
                background-color: blue;
                float: none;
            }
            /*规定应该从父元素继承 float 属性的值。*/
            .box1{
                width: 100px;
                height: 100px;
                background-color: yellow;
                float: inherit;
            }
            
            /*元素向左浮动。*/
            .box2{
                width: 100px;
                height: 100px;
                background-color: red;
                float: left;
            }
            
            /*元素向右浮动。*/
            .box3{
                width: 100px;
                height: 100px;
                background-color: green;
                float: right;
            }
            
            
        </style>
    </head>
    <body>
        <div class="box1">box1</div>
        <div class="box2">box2</div>
        <div class="box3">box3</div>
        <div class="box4">box4</div>
    </body>
</html>

效果图:

demo2:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            /*规定应该从父元素继承 float 属性的值。*/
            .box1{
                width: 100px;
                height: 100px;
                background-color: yellow;
                float: inherit;
            }
            
            /*元素向左浮动。*/
            .box2{
                width: 100px;
                height: 100px;
                background-color: red;
                float: left;
            }
            
            /*元素向右浮动。*/
            .box3{
                width: 100px;
                height: 100px;
                background-color: green;
                float: right;
            }
            
            
        </style>
    </head>
    <body>
        <div class="box1">box1</div>
        <div class="box2">box2</div>
        <div class="box3">box3</div>
        <p>
            山不在高,有仙则名。水不在深,有龙则灵。斯是陋室,惟吾德馨。苔痕上阶绿,草色入帘青。谈笑有鸿儒,往来无白丁。可以调素琴,阅金经。无丝竹之乱耳,无案牍之劳形。南阳诸葛庐,西蜀子云亭。孔子云:何陋之有?
        </p>
    </body>
</html>

效果可以验证浮动的元素不会盖住文字,文字会自动环绕在浮动元素的周围,所以我们可以通过浮动来设置文字环绕图片的效果:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            /*规定应该从父元素继承 float 属性的值。*/
            .box1{
                width: 100px;
                height: 100px;
                background-color: yellow;
                float: inherit;
            }
            
            /*元素向左浮动。*/
            .box2{
                width: 100px;
                height: 100px;
                background-color: red;
                float: left;
            }
            
            /*元素向右浮动。*/
            .box3{
                width: 100px;
                height: 100px;
                background-color: green;
                float: right;
            }
            
            
        </style>
    </head>
    <body>
        <div class="box1">box1</div>
        <div class="box2">box2</div>
        <div class="box3">box3</div>
        <p>
            山不在高,有仙则名。水不在深,有龙则灵。斯是陋室,惟吾德馨。苔痕上阶绿,草色入帘青。谈笑有鸿儒,往来无白丁。可以调素琴,阅金经。无丝竹之乱耳,无案牍之劳形。南阳诸葛庐,西蜀子云亭。孔子云:何陋之有?
        </p>
    </body>
</html>

效果:

demo3验证开启span的浮动,内联元素脱离文档流以后会变成块元素:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0px;
                padding: 0px;
            }
            .div1{
                /*
                 * 在文档流中,子元素的宽度默认占父元素的全部
                 */
                background-color: #bfa;
                
                /*
                 * 当元素设置浮动以后,会完全脱离文档流.
                 *     块元素脱离文档流以后,高度和宽度都被内容撑开
                 */
                float: left;
            }
            
            .span1{
                /*
                 * 开启span的浮动
                 *     内联元素脱离文档流以后会变成块元素
                 */
                float: left;
                width: 100px;
                height: 100px;
                background-color: yellow;
            }
            
        </style>
    </head>
    <body>
        
        <div class="div1">div</div>
        
        <span class="span1">span</span>
        
    </body>
</html>

看下效果:

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
前端学习:css基本知识(1)
前端学习:css基本知识(1)
9 0
前端学习:css基本知识
前端学习:css基本知识
68 0
前端学习之CSS(二)
一、CSS语法 优先级:  (内联样式)Inline style > (内部样式)Internal style sheet >(外部样式)External style sheet > 浏览器默认样式 二、选择器 三、背景/图片 四、文本 / 字体 五、表格 / 列表 六、大小单位(px/em/rem) 【如果大家对程序员,web前端感兴趣,想要学习的,关注一下小编吧。
785 0
前端学习 -- Css -- 内联元素的盒模型
内联元素不能设置width和height; 设置水平内边距,内联元素可以设置水平方向的内边距:padding-left,padding-right; 垂直方向内边距,内联元素可以设置垂直方向内边距,但是不会影响页面的布局; 为元素设置边框,内联元素可以设置边框,但是垂直的边框不会影响到页面的布局; 水平外边距内联元素支持水平方向的外边距; 内联元素不支持垂直外边距; 为右边的元素设置一个左外边距,水平方向的相邻外边距不会重叠,而是求和。
980 0
前端学习 -- Css -- 有序列表和无序列表
列表就相当于去超市购物时的那个购物清单, 在HTML也可以创建列表,在网页中一共有三种列表: 1.无序列表 2.有序列表 3.定义列表 无序列表 - 使用ul标签来创建一个无序列表 - 使用li在ul中创建一个一个的列表项, 一个li就是一个列表项...
991 0
前端学习 -- Css -- 文本标签
em和strong - 这两个标签都表示一个强调的内容, em主要表示语气上的强调,em在浏览器中默认使用斜体显示 strong表示强调的内容,比em更强烈,默认使用粗体显示 DOCTYPE html> 今夕何夕兮,搴舟中流。
835 0
前端学习 -- Css
Css:Cascading Style Sheets CSS叫做层叠样式表,用来设置页面中元素的样式。背景颜色、字体颜色、字体大小。。。 编写位置:   1,内联样式:     将样式编写到标签的style属性中           doctype html> 超链接 风起檐飞雪 沟壑巧遁形 置身大漠里 踏浪烟波中 效果: 如果对其他标签起作用,内联样式就需要复制到其他标签去,这样就显得比较麻烦,无法复用,不易维护。
1066 0
前端学习 -- Html&Css -- 背景
background 在一个声明中设置所有的背景属性。 background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。 background-color 设置元素的背景颜色。
929 0
前端学习 -- Html&Css -- 层级和透明度
层级 如果定位元素的层级是一样,则下边的元素会盖住上边的。 通过z-index属性可以用来设置元素的层级,可以为z-index指定一个正整数作为值,该值将会作为当前元素的层级,层级越高,越优先显示。
733 0
前端学习 -- Html&Css -- 相对定位 绝对定位 固定定位
相对定位 - 定位指的就是将指定的元素摆放到页面的任意位置,通过定位可以任意的摆放元素。 - 通过position属性来设置元素的定位。 -可选值: static:默认值,元素没有开启定位; relative:开启元素的相对定位; absolute:开启元素的绝对定位; fixed:开启元素的固定定位(也是绝对定位的一种)。
1054 0
+关注
西北野狼
擅长Android ,J2EE开发 博客园地址:http://www.cnblogs.com/androidsuperman/p/7834762.html github地址: https://github.com/soyoungboy
463
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载