CSS中浮动float继承的问题

显示全部楼层 · 2021-1-27 06:52:34

都知道float是不能继承的，但是为啥出现下列情况：

Document
.box1{
height:40px;
line-height:40px;
background-color:red;
}
/*.fl{
float:left;
}*/
.box2{
padding:030px010px;
background-color:yellow;
}

我是中国人

但是给fl这个盒子加了float：left后：

Document
.box1{
height:40px;
line-height:40px;
background-color:red;
}
.fl{
float:left;
}
.box2{
padding:030px010px;
background-color:yellow;
}

我是中国人

浮动不是不会继承么？那么box2的显示怎么解释？实在是想不通啊
分 -->

千问 · 2021-1-27 06:52:34

这里的问题不在于浮动的继承问题，问题在于元素宽度的确定问题。
块级元素默认独占一行（默认宽度为100%），这是没给.fl设置浮动的时候为何黄色块占据全屏的原因。
当元素设置浮动之后，它会自动收缩，按照可计算的最宽子元素来确定容器本身的宽度。由于.box2元素设置了内边距以及行高，使其具有了120*40尺寸的盒子。那么父级.fl盒子也收缩至120*40尺寸，加上浮动的效果就是下图中的样子了