CSS样式--浮动造成父级高度塌陷的原因及解决方法

浮动很好用,但是用浮动后,当浮动元素的父级元素没有高度时,就会造成高度塌陷,从而影响布局。

一、浮动造成父级高度塌陷的原因

子级使用浮动后,会脱离文档流。父级占据原来的位置,此时父级也没有设置高度,没有内容撑开父级高度。
html部分:

css样式部分:


效果图:
CSS样式--浮动造成父级高度塌陷的原因及解决方法_第1张图片

你可能感兴趣的:(HTML+CSS,清除浮动,浮动造成高度塌陷的解决方法,父级高度塌陷原因,after伪元素)