CSS浮动属性的定义与清除干货分享
网页布局的本质就是用CSS来摆放盒子,CSS提供了3种传统布局方式:
普通流(标准流)—— 标签按默认方式排列。
浮动。
定位。
定义:float属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
语法:选择器 {float: 属性值;}
none —— 默认值,元素不浮动。
left —— 元素向左浮动。
right —— 元素向右浮动。
作用:如何让多个块级盒子水平排列成一行?如何实现两个块级盒子的左右对齐?
总结:
任何元素都可以浮动,不管原先是什么模式的元素。
浮动最典型的运用就是可以让多个块级元素一行内排列显示。
网页布局第一准则:多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动。
浮动特性分别是脱标、一行显示、行内块特征。
脱标:
定义:脱离标准流(浮)移动到指定位置(动),是浮动最重要的特性。
特点:浮动的盒子不再保留原先的位置。
一行显示:
如果多个盒子都设置了浮动,则它们会按照属性值一行内显示(没有间隙)并且顶端对齐排列。
如果父级宽度装不下这些浮动的盒子,多出的盒子会另起一行对齐。
行内块特征:
如果块级盒子没有设置宽度,添加浮动后,它的大小根据内容来定。
浮动的盒子中间没有缝隙。
行内元素同理。
1 |
|
为什么要清除浮动?
我们会先定义标准流父盒子,在父盒子里面摆放浮动子盒子,但有的情况下不方便设置父盒子的高度,但父盒子高度为0时,由于浮动的子盒子不占位置,就会影响后面的标准流盒子。
语法:
选择器 { clear: 属性值;}
left —— 清除左侧浮动的影响。
right —— 清除右侧浮动的影响。
both —— 同时清除左右两侧浮动的影响(推荐)。
总结:
清除浮动的本质是清除浮动元素脱标造成的影响。
清除浮动的策略是闭合浮动,只让浮动在父盒子内部影响,不影响父盒子外面的其他盒子。
清除浮动的方法:
额外标签法:
定义:额外标签法(隔墙法)会在浮动元素末尾添加一个空的块级标签,例如div 或者br等(W3C推荐)。
1 | <div style="clear: both"></div> |
优点:通俗易懂,书写方便。
缺点:添加许多无意义标签,结构化较差。
父元素overflow:
定义:给父级元素添加overflow属性,将属性值设置为hidden、auto或scroll。
优点:代码简洁。
缺点:无法显示溢出的部分。
after伪元素:
定义:**:after**方式是额外标签法的升级版,在CSS样式中添加下图代码后,在父元素中调用类即可 。
1 | .clearfix:after { |
优点:没有增加标签,结构更简单。
缺点:照顾低版本浏览器。
双伪元素法:
定义:在CSS样式中添加下图代码后,在父元素中调用类即可 。
1 | .clearfix:before, .clearfix:after { |
优点:代码更简洁。
缺点:照顾低版本浏览器。