认识浮动float属性

如果想要对网页进行布局，那么必须使用浮动。

浮动的特性

脱标（脱离标准文档流）

脱标之后所有元素都是平等的，已经没有行级元素与块级元素之分。

float与display有什么区别？

它们俩的本质是不一样的。

display是改变元素的性质，这时候依然存在行级元素和块级元素。

但是float浮动脱标之后，就不存在行级元素和块级元素，这个改变所有元素都是一样的。

父元素浮动子元素会不会浮动？

在一个浮动的大盒子里面依然是一个标准文档流，所以父元素浮动子元素是不会浮动的。

浮动的元素会被动覆盖掉其他的元素

浮动的元素不会去主动覆盖其他元素

浮动的元素有没有外边距合并？　没有

浮动的元素有没有外边距塌陷？　没有

浮动特性——文字环绕

浮动的元素可以覆盖一个容器，但是不能覆盖掉它里面的内容。

没有清除浮动的情况

假如一个容器，它的所有子元素都脱标了。

那么这时候该元素就不会被子元素撑开，也就没有高度了。

一个没有高度的容器是管不住浮动元素的

只要使用了浮动，就必然要清除浮动。

清除浮动：清除浮动造成的影响

清除浮动的方式

1、给父元素加固定高度。因为只有有高度的盒子才能管住浮动元素。

（这种方式清除浮动好不好？做站的时候高度最好不要写死）

2、给父元素添加overflow: hidden;

3、给需要清除浮动的元素加一个float自己也浮动

（不推荐使用，因为这样浮动永远都清除不完）

4、clear: both;　CSS提供的清除浮动的方式

5、内墙法：在需要清除浮动的元素中加一个元素，给这个元素添加一个clear: both;属性

好处：父元素（清除浮动的元素）可以被子元素撑开并且margin值也可以正常使用

5-1、隔墙法：给两个浮动元素之间加一个空的div，给这个div添加clear: both;并且给它一个高度。

6、双伪元素清除浮动（原理：内墙法）

.clearfix {}
.clearfix::before,.clearfix::after {
    content: "";
    display: block;
}
.clearfix::after {
    clear: both;
}