有时候我们想让父元素被子元素撑开而不是我们给它设定一个固定的高度,但是会出现边距塌陷造成的各种边距缺失问题还有父元素被压扁的各种问题,可以通过清除浮动解决。
- clear:both:在出现塌陷的两个元素中间插入一个div,在css设置clear:both。方法简单,但是增加了无语义标签。
- overflow:hidden。给父元素设定overflow属性,也可以清除浮动。但是对于超过父元素的内容会隐藏,而且文本不会自动换行。
- 使用after伪元素。
.myclass:after { content:"", display:block; height:0; clear:both; }
- before和after一起使用。
.myclass:before, .myclass:after { content:"", display:table; } .myclass:after{ clear:both; }