往期回顾：CSS的一些误区（一）自身不设置宽度，让这个盒子居中起来？
一、浮动带来的问题
- 内盒浮动，外层包裹的盒子高度塌陷，与自己预期不符。
- 内盒必须全部浮动，得安排内盒得浮动方向，没有默认，都必须显式设置。
- 使用外盒使用overflow:hidden清除浮动，但是内盒使用margin负值等情形，造成页面被截断。
这些是过去几年中，如果使用浮动布局产生的“尴尬返工时刻”。迎来了flex布局后，再也不使用浮动进行布局了。由此我大胆推测flex布局的发明就是为了消灭浮动。弄清楚元素浮动之后，对其自身实体产生的宽高变化，对于解决浮动产生的问题就迎刃而解了。另外想借这篇文章，纠正我脑海中的误区，这个误区就是“浮动使得元素脱离标准文档流”。
二、浮动后元素的宽
Block块级元素的宽是独占一行，如果不通过盒模型设置，宽度继承100%占满文档。inline-block元素却是仅以自身内容为宽度。元素浮动后，Block块级元素的显示模式变成了inline-block,宽度本身是100%的元素，因为显示模式的改变，宽度变为自身内容宽度。
三、浮动后元素的高
Block块级元素的高，通常为显式盒模型高，或者是隐式内容撑高。
- 首先讲讲
<div>我就写几个字</div>这样属于隐式内容撑高。而这个实体文字内容我就写几个字的高度又是由该文字的fontsize决定的。除了fontsize我们还可以给他设置line-height,这样这个盒子的高度又撑开了。两者配合决定了实际的高度。 - 显式盒模型高，就是我们通常设置width、padding、border的值来控制盒子的高度。
而浮动之后，元素的高由什么来控制了呢？
- 如果有文字内容，由文字的fontsize和line-height来控制，二者属于Text属性，均可以继承，最本源可以继承自body。
- 如果没有文字内容的Block块级元素，该元素的高被破坏，也就是高消失了。
<body>
<div class="outer">
<div class="float">
<img src="./1.png" alt="">
</div>
</div>
</body>
<style>
.outer {
border-top: 20px solid #000;
border-bottom: 20px solid rgb(241, 41, 41);
}
.float {
float: left;
}
</style>
即使是上面的代码插入的是img实体的图片，但是outer外盒，获取不到img高度。此时出现了高度塌陷的现象。
outer外盒加上overflow:hidden,使得outer包裹的所有元素，触发重新计算高度，才能将图片达到自己预期显示效果。
再比如块级元素内仅仅有文字内容，如果是按照隐式撑高原则，这个浮动的盒子应该会被文字撑开，占领一部分空间。测试结果：
此时可以得出的结论是：浮动后的元素，高度消失了。那能不能强行给高度，毕竟浮动把盒子的显示模式改成了display:inline-block;可以实现自己设置宽高了。
- 浮动元素可以设置高度，但是设置高度之后，外盒的高度一部分会被“吃掉”
比如我给float元素一个高度300px，效果是外层元素的下边框不见了。设置over-flow:hidden可以显示完整的下边框。
综上所述，摸清到底浮动后，元素的宽高去了哪里，能明白元素浮动后造成的一些怪异影响，而无需要强行记忆“浮动使得元素脱离标准流”这样的错误知识。
1341
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
