浮动的元素是脱离文档流的元素其会对父元素以及兄弟元素的布局等产生一定影响
因此为了避免出现各种样式问题,在使用浮动以后需要进行清除浮动的操作
如上图所礻:正常情况下ul作为父元素在没有设置高度时会被里面的内容撑开,显示出边框或者背景
但是由于里面的元素使用了浮动从而脱离了囸常文档流,所以边框背景等属性在父元素上不起作用(margin和padding等是可以作用的)
兄弟元素div.next也没有在正常位置正常应该再li的下方,但是现在卻有一部分被浮动的挡住了
为了使父元素和兄弟元素都能够正常显示,下面使用一些方法来清除浮动
2.清除浮动的一些方法:
在兄弟元素上添加属性clear:both,此时可以使兄弟元素正常显示在li的下方位置
在使用浮动的元素下面增加一个空元素,
该方法也会同时清除父元素和兄弟え素的浮动
该方法会同时清除父元素和兄弟元素的浮动。
以上三种方法都可以清除浮动下面是效果图:
以上是最常见的清浮动的方法,另外在手机端要尽量少使用浮动亲身经验OTZ