CSS清除浮动

块级元素在页面中独占一行,自上而下排列。但很多时候因为布局需要,我们需要在一行显示多个块级元素,这时我们就需要用到浮动,即float属性。使用float属性可以实现我们的需要的页面布局,但也会带来一些问题。浮动回事元素脱离文档流,会使父级元素高度无法撑开,与浮动元素同级的非浮动块级元素会被遮盖



left
right
浮动带来的问题.png
浮动带来的问题2.png

为了解决浮动带来的问题,我们需要清除浮动,清除浮动的方法有以下几种:

1.给父级元素设置相对应的高度


left
right
2.为父元素添加overflow:hidden/auto


left
right
3.在父元素结束标签之前插入清除浮动的块级元素


left
right
4.利用伪元素清除浮动

该样式在父元素的最后添加一个:after伪元素,通过清除伪元素浮动来撑起父元素的高度



left
right

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