浮动盒子的理解

除了块盒和行盒，还有一种盒子，就是行块盒(display:inline-block)，这种盒子结合了行盒和块盒的特点，它既有行盒的不独占一行，也有块盒的可以设置宽高，按理说这种盒子应该很受欢迎，但在实际开发中，我好像没怎么用过，具体原因，下面说。

浮动盒子(float:left/right)

float:left 左浮动， 元素靠左靠上； float:right 右浮动 ，元素靠右靠上。当一个元素浮动后，这个元素就会默认被改改成了块盒，但是却有行块盒的特点，可以修改宽高，可以不独占一行，那为啥开发者不直接改成行块盒，恕我才疏学浅，不太明白，当然，浮动盒子和行块盒还是有区别的，两个行块盒靠在一起，总有缝隙，然而两个浮动盒子靠在一起很显然没有，所以我只需要调节外边距，或者内边距就能达到我想要的效果，所以在实际开发中，我会尽可能的选择浮动盒子，更倾向于浮动盒子。

浮动盒子会与常规流盒子发生冲突，浮动盒子会去主动避开常规流块盒，但是不会避开常规流行盒，同样常规流块盒遇到浮动盒子，会无视浮动盒子。

文字环绕，文字环绕的效果其实就是使元素浮动起来的效果，我一开始百思不得其解，后来查阅资料看到这么一句话豁然，使用浮动盒子脱离文档流，其他盒子会无视这个元素，但是其文本依然会为这个元素让位置，这句话解开了文字环绕的问题

使用浮动盒子绕不开的一个问题，就是高度坍塌，当然如果你喜欢一开始就给父元素设置好了高度，你就当我没说，高度坍塌的根源就是：常规流盒子在计算高度时，是不会计算浮动盒子的高度，所以常常会出现，你已经写好了内容，怎么显示不出的问题，这时候就要考虑一下是不是高度坍塌的问题了。解决高度坍塌有好几种方法，我在实际操作中更喜欢清除浮动的办法，先给父元素加个类名 clearfix            .clearfix::after{content:'';  display:'block';clear:'both'}   这是什么意思呢，就是在父元素后面加一个没有宽高的块盒，没有内容，并清除左右浮动，这是一个非常好的办法。