CSS float 浮动属性 | 您所在的位置:网站首页 › float有哪些属性值 › CSS float 浮动属性 |
float属性:定义元素朝哪个方向浮动。 1.页面标准文档流、浮动层、float属性 1.1 文档流 HTML页面的标准文档流(默认布局)是:从上到下,从左到右,遇块(块级元素)换行。 1.2 浮动层浮动层:给元素的float属性赋值后,就是脱离文档流,进行左右浮动,紧贴着父元素(默认为body文本区域)的左右边框。 而此浮动元素在文档流空出的位置,由后续的(非浮动)元素填充上去:块级元素直接填充上去,若跟浮动元素的范围发生重叠,浮动元素覆盖块级元素。内联元素:有空隙就插入。 1.3 float 属性介绍① left :元素向左浮动。 ② right :元素向右浮动。 ③ none :默认值。 ④ inherit :从父元素继承float属性。 1.4 相邻兄弟元素情况相邻兄弟元素是否也包含了float属性,会影响布局。 1.5 默认布局图 ![]() ![]() 2.float:left 说明:元素向左浮动。 2.1 代码变更input2 添加:float:left div-b 添加:float:left div-d 添加:float:left 2.2 变更后视图① 浏览器的宽度“不够长”时 ② 浏览器的宽度"够长"时 3.float:right 说明:元素向右浮动。 3.1 代码变更input2元素:添加 float:right div-b 添加:float:right div-d 添加:float:right 3.2 变更后视图① 浏览器的宽度“不够长”时 ② 浏览器的宽度"够长"时 4. 相邻元素含有float属性 因内联元素的特性,最好别把内联元素与块级元素相邻使用float属性。 下面都以块级元素为例: 默认视图: 给这三个div都添加 float:left 4.1.1 视图①浏览器的宽度"足够长" ②浏览器的宽度"不够长" Ⅰ 相邻的浮动元素,left属性最前面的元素,排在最左面。 Ⅱ 成为浮动元素后,在浮动层拥有内联元素的"特性",当多个浮动元素1排容不下时,就换行。 4.2 float:right 给这三个div都添加 float:right 4.2.1 视图①浏览器的宽度"足够长" ②浏览器的宽度"不够长" Ⅰ 相邻的浮动元素,right属性最前面的元素,排在最右面。 Ⅱ 成为浮动元素后,在浮动层拥有内联元素的"特性",当多个浮动元素1排容不下时,就换行。 4.3 height高度不等的块级元素 把div-a的height值设为大于div-b,三个div都添加 float:left后: 4.3.1 视图①浏览器的宽度"足够长" ②浏览器宽度缩小时 ③浏览器宽度进一步缩小时 Ⅰ height不相等的div浮动元素排序时,照拥有内联元素的"特性",当多个浮动元素1排容不下时,就换行。 4.3.3 解决浏览器宽度缩小变形把添加float的属性的div元素嵌入在一个div中,并给此div添加width和height属性。浏览器宽度缩小时,也不会发生变形。 可参照 CSS HTML元素布局及Display属性介绍
==================================系列文章========================================== |
CopyRight 2018-2019 实验室设备网 版权所有 |