1.什么是浮动?

css中,一共给我们了三种布局方式

标准文档流
浮动(float)
定位(postion)

DIV+CSS布局

在css中很多效果是标准流无法做到的,比如我要三个div盒子在一行显示,这个在标准流中是无法办到的,因为块级元素的特点就是可以设置宽和高,但是它会独占一行
这时候我们就需要使用浮动

2.浮动经常出现的问题

在元素进行浮动后,会出现父元素没有高度的情况,下面的内容会直接弹到上面的div盒子下面,这是因为元素浮动后脱离了标准流,父盒子无法检测到子元素,于是高度变成了0

B元素浮动后

浮动带来的问题

浮动的元素脱离了标准文档流，即脱标
浮动的元素互相贴靠
浮动的元素会产生”字围“效果
浮动元素有收缩效果
- 当浮动元素没有设置尺寸,会适应浮动元素内的子元素尺寸
浮动的元素不占尺寸,标准流元素可以撑起父级块的尺寸,浮动元素不可以
浮动元素设置margin_top不会发生塌陷现象
- 给标准流元素设置margin-top时会发生margin塌陷

如何解决浮动带来的问题?

我们需要清除浮动

清除浮动本质

清除浮动的本质是清除浮动元素造成的影响：浮动的子标签无法撑开父盒子的高度

注意：

如果父盒子本身有高度，则不需要清除浮动
清除浮动之后，父级就会根据浮动的子盒子自动检测高度。
父级有了高度，就不会影响下面的标准流了

清除浮动的六种方法

方法1:固定宽高
给浮动的元素添加父级div盒子,再给父级盒子设置高度

缺点:高度固定死了,无法做到自适应,不宜维护,不灵活
应用:万年不变导航栏,固定栏;

方法2:一起浮动
父元素也添加浮动,这样父元素也脱离文档流

缺点:这是一种将错就错的办法,后面的DIV盒子依然会塌陷到浮动元素下面

image.png

方法3:额外标签法
在浮动的元素最后添加一个空div标签,里面设置style='clear:both';触发bfc机制
优点：通俗易懂，书写方便
缺点：添加许多无意义的标签，结构化较差
注意：要求这个新的空标签必须是块级元素。

<div style="clear:both"></div>

image.png

方法4:父级添加双伪元素
:after 方式是额外标签法的升级版。给父元素添加：

优点：没有增加标签，结构更简单
缺点：照顾低版本浏览器
代表网站：百度、淘宝网、网易等

.clearfix:after{
        content: "";
        display: block;
        height: 0px;
        clear: both;
        visibility: hidden;
    }
/*IE6\7 兼容*/
.clearfix{
    *zoom: 1;
}

方法5:父级添加双伪元素
:after 方式是额外标签法的升级版。给父元素添加：

.clearfix:before,.clearfix:after{
   content:"";
   display:table;
}
.clearfix:after{
  clear:both;
}
/*兼容IE代码*/
.clearfix{
  *zoom:1;
}

优点：代码更简洁
缺点：照顾低版本浏览器
代表网站：小米、腾讯等

方法6.父盒子添加overflow: hidden;触发BFC
方法简单,常用

附:1.什么是BFC?

BFC Block fomatting context（块级格式化上下文），是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。

简单来说:bfc是创建了一个单独的区域,容器外的元素绝对无法影响到bfc内部的元素

2.如何创建BFC

1、float的值不是none。
2、position的值不是static或者relative。
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4、overflow的值不是visible

3.BFC的作用

1.利用BFC避免margin重叠。

在布局中经常出现,两个相邻的盒子,上面盒子设置了 margin-bottom: 20px,下面盒子设置了margin-top: 30px;本来期望是20+30=50px,但在使用时并不是求和,而是取最大值,最后变成了50px

外边距塌陷

这时我们可以设置bfc来实现隔离开元素,防止他们相互影响

解决方案

1.用一个大盒子包住下面的盒子,设置大盒子是padding-top

2.使用一个大盒子包住下面的盒子,设置是overlow,触发bfc

2.自适应两栏布局

在PC端布局中,常见左侧宽度固定,右侧随浏览器的变化而自适应,通常是将左侧栏浮动来实现的,右侧使用block来自动填满内容,但是随着右侧内容满了,就会挤到左侧底部