清除浮动

2018-08-14  本文已影响16人  9979eb0cd854
img.png

1、为什么要清除浮动

img.png

2、清除浮动的本质

img.png
img.png
img.png

出现以下这种效果:

如果孩子浮动了,浮动元素不占有位置,父亲有没有高度,此时底下的盒子会跑上来

img.png

清除浮动的方法

img.png

1、额外标签法

img.png

实例代码:

img.png

2、父级添加overflow属性方法

img.png

实例代码

img.png
img.png

3、使用after伪元素清除浮动

img.png

实例代码:

img.png

4、双伪元素清除浮动

img.png
img.png

实例代码:

img.png
上一篇下一篇

猜你喜欢

热点阅读