清除浮动

为什么要清除浮动呢?因为不清除浮动的话,再布局的元素就会在浮动元素的下方。如果把要布局的元素给他添加一个清除浮动的属性的话,就代表着新布局的这个元素上边不允许出现对应模式的浮动元素,因此他就会按照流式布局继续进行往下布局。而不会被对应类型的元素盖住。

清除左边:clear:left

清除右边:clear:right

清除左边和右边:clear:both

浮动带来的负面影响:如果子元素浮起来后,那么子元素就不会撑起来父元素了。这将导致父元素内部不包含内容。

清除浮动_第1张图片
浮动带来的负面影响

清除浮动负面影响的是那种方式:

1.添加空盒子,与浮动元素并列的最后一个位置添加一个空盒子并且清除掉浮动就可以了。


清除浮动_第2张图片
添加空盒子清除浮动

2.往父级元素上添加如下代码,添加如下代码即可。


清除浮动_第3张图片

3.往父级元素上添加如下类即可

.clear:after{display:block;clear:both;content:".";visibility:hidden;height:0;}

你可能感兴趣的:(清除浮动)