css中常用的清楚浮动的方法

如果父级元素没有设置高度,并且其中的子元素进行了浮动,那么父级元素的高度就会塌陷成0高度,会影响后面元素的排版和布局,

也就是后面的元素会直接顶上去。

所以我们就需要解决这种问题

第一种方法: 直接给父级元素添加overflow:hidden; 属性

6.jpg

效果:

7.jpg

解决办法:

8.jpg

效果:

9.jpg

第二种方法:在浮动的元素后面再添加一个空的div,并且添加清楚浮动的属性

10.jpg

第三种方法:

11.jpg

有时也会这样写:

12.jpg

第四种方法: 让父级元素也一起浮动起来,也能让父级元素撑起高度。

通常第三种方法用的最多。

猜你喜欢

转载自blog.51cto.com/11871779/2310411