清除浮动元素的方法和各自的优缺点
清除浮动,实际上是清除父元素的高度塌陷。因为子元素脱离了父元素的文档流,所以,父元素失去了高度,导致了塌陷。要解决这个问题,就是让父元素具有高度。
浮动元素的特性:
在正常布局中位于该浮动元素之下的内容,此时会围绕着浮动元素,填满其右侧的空间。浮动到右侧的元素,其他内容将从左侧环绕它(浮动元素影响的不仅是自己,它会影响周围的元素对其进行环绕。float仍会占据其位置,position:absolute
不占用页面空间 会有重叠问题 )
1.在浮动元素末尾添加空标签清除浮动 clear:both (缺点:增加无意义标签)
<div style="clear:both;"></div>
2.给父元素设置 overflow:auto属性 3.after伪元素