清除浮动的几种常用方法

css中的元素分为块级元素和行内元素,对于块级元素来说,比较“霸道”,是不和其他的块级元素放在同一行的,常见的就是div和ul,但是,在生产应用中,经常会遇到块级元素水平排列的情况,这个时候就需要用到浮动。浮动就像一把双刃剑,一面是天使,一面是魔鬼,如果稍微不注意的话,浮动没有清楚,就可能会导致高度坍塌。下面我们就分享一下平时经常使用的清除浮动的方法。

方法一:对父级设置合适的CSS高度。




   
    Title
   



   

   



对于box1和box2来说,都设置了float值,并且不为none,如果不添加父级的高度,那么父级元素的背景就没办法展示,比如上面的代码,父级不能撑开导致红色的背景就不能展示出来。

方法二:对父级增加overflow:hidden属性

这个解决方法涉及到了BFC,即块级格式化上下文,它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。设置了overflow:hidden属性,就会为这个块级元素生成一个独立的块圾上下文,就像在window全局作用域内,声明了一个function就会生成 一个独立的作用域一样,新开僻的BFC像是开僻了一个新的小宇宙,使这个块圾元素内部的排版完全独立隔绝。

独立的块级上下文可以包裹浮动流,全部浮动子元素也不会引起容器高度塌陷,也就是说包含块会把浮动元素的高度也计算在内,所以不用清除浮动来撑起高度。

方法三:clear:both

我们新建一个样式选择器CSS命名为“.clear”,并且对应选择器样式为“clear:both”,然后我们在父级“

”结束前加此div引入“class="clear"”样式。这样即可清除浮动。

你可能感兴趣的:(清除浮动的几种常用方法)