浮动是CSS布局中常用的一个属性,它可以使元素位置进行调整,但在使用浮动时需要注意子盒子和父盒子的关系。当父盒子和子盒子都设置了浮动属性时,在浮动元素所在的容器中,父盒子将会发生高度塌陷,导致子盒子溢
浮动是CSS布局中常用的一个属性,它可以使元素位置进行调整,但在使用浮动时需要注意子盒子和父盒子的关系。
当父盒子和子盒子都设置了浮动属性时,在浮动元素所在的容器中,父盒子将会发生高度塌陷,导致子盒子溢出父盒子。这时候需要清除浮动,避免出现问题。
.parent { float: left; width: 300px; background-color: #ccc; } .child { float: left; width: 100px; height: 100px; background-color: #f00; }
上述是一个典型的子盒子和父盒子都浮动的情况,可以看出子盒子的高度大于父盒子,而且父盒子发生了高度塌陷,这时候我们需要在父盒子的最后面加上一个空标签,通过设置样式清除浮动,达到消除高度塌陷的效果。
.clearfix:after { content: ""; clear: both; display: block; }
通过加上类名为clearfix的空标签,并且设置清除浮动的样式后,子盒子与父盒子的浮动就可以正常进行了,达到了理想的视觉效果。
粉丝
0
关注
0
收藏
0