CSS浮动
# 六、CSS浮动
# BFC
# 什么是BFC
W3C 上对 BFC 的定义：
原文：Floats, absolutely positioned elements, block containers (such as inline-blocks, tablecells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents. 译文：浮动、绝对定位元素、不是块盒子的块容器（如 inline-blocks 、 table-cells 和 table-captions ），以及 overflow 属性的值除 visible 以外的块盒，将为其内容建立新 的块格式化上下文。
MDN 上对 BFC 的描述：
块格式化上下文（Block Formatting Context，BFC） 是 Web 页面的可视 CSS 渲染的一部分， 是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
更加通俗的描述：
- BFC 是 Block Formatting Context （块级格式上下文），BFC是一个CSS中的一个隐含的属性,可以理解成元素的一个“特异功能”。
- 该 “特异功能”，在默认的情况下处于关闭状态；当元素满足了某些条件后，该“特异功能”被激活。
- 所谓激活“特异功能”，专业点说就是：该元素创建了 BFC （又称：开启了 BFC ）。
# 开启了BFC能解决什么问题
- 开启 BFC 的元素，子元素和父元素外边距不会重叠,其子元素不会再产生 margin 塌陷问题。
- 开启 BFC 的元素，元素不会被其他浮动元素所覆盖。
- 开启 BFC 的元素，元素可以包含浮动的子元素,就算其子元素浮动，元素自身高度也不会塌陷。
# 如何开启BFC
- 根元素
- 浮动元素
- 绝对定位、固定定位的元素
- 行内块元素
- 表格单元格： table 、 thead 、 tbody 、 tfoot 、 th 、 td 、 tr 、 caption
- overflow 的值不为 visible 的块元素
- 伸缩项目
- 多列容器
- column-span 为 all 的元素（即使该元素没有包裹在多列容器中）
- display 的值，设置为 flow-root
1、设置元素的浮动（不推荐）
2、将元素设置为行内块元素（不推荐）
3、将元素的overflow设置为一个非visible的值
- 常用的方式 为元素设置 overflow:hidden 开启其BFC 以使其可以包含浮动元素
2
3
4
# 1. 浮动的简介
在最初，浮动是用来实现文字环绕图片效果的，现在浮动是主流的页面布局方式之一。
# 2. 元素浮动后的特点
🤢脱离文档流。
😊不管浮动前是什么元素，浮动后：默认宽与高都是被内容撑开（尽可能小），而且可以设置宽高。
😊不会独占一行，可以与其他元素共用一行。
😊不会margin合并，也不会margin塌陷，能够完美的设置四个方向的margin和padding。
😊不会像行内块一样被当做文本处理（没有行内块的空白问题）。
# 3. 浮动小练习
# 练习 1 ：盒子 1 右浮动，效果如下
# 练习 2 ：盒子 1 左浮动，效果如下
# 练习 3 ：所有盒子都浮动，效果如下
# 练习 4 ：所有盒子浮动后，盒子 3 落下来，效果如下
# 4. 解决浮动产生的影响
# 4.1 元素浮动后会有哪些影响
对兄弟元素的影响： 后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面；对前面的兄弟无影响。
对父元素的影响： 不能撑起父元素的高度，导致父元素高度塌陷；但父元素的宽度依然束缚浮动的元素。
# 4.2 解决浮动产生的影响（清除浮动）
- 解决方案：
- 方案一： 给父元素指定高度。
- 方案二： 给父元素也设置浮动，带来其他影响。
- 方案三： 给父元素设置 overflow:hidden 。
- 方案四： 在所有浮动元素的最后面，添加一个块级元素，并给该块级元素设置 clear:both。
- 方案五 ： 给浮动元素的父元素，设置伪元素，通过伪元素清除浮动，原理与方案四相同。
===> 推荐使用
.clearfix::before,.clearfix::after {
content: "";
display: block;
clear:both;
}
2
3
4
5
布局中的一个原则：设置浮动的时候，兄弟元素要么全都浮动，要么全都不浮动。
# 5. 浮动布局小练习
整体效果如下：
具体标注如下：
# 6 .浮动相关属性
| CSS 属性 | 功能 | 属性值 |
|---|---|---|
| float | 设置浮动 | left: 设置左浮动 right: 设置右浮动 none：不浮动，默认值 |
| clear | 清除浮动 清除前面兄弟元素浮动元素的响应 | left：清除前面左浮动的影响 right：清除前面右浮动的影响 both：清除前面左右浮动的影响 |