走进浮动
html 元素存在的两种表现形式:
常规流(文档流/标准流/流内)
脱离常规流(流外)
包含块： 离当前元素最近的块级祖先元素，为该浮动元素的包含块
浮动的影响
浮动的元素自身会生成一个块框
浮动的元素会脱离常规流
浮动会改变文档流
浮动会使盒子塌陷
浮动影响行内元素的展示
浮动会吸附其它浮动的元素
浮动的表现形式
浮动的元素会生成一个块级框
对于一个浮动的元素会自动生成一个块级框，并且具备块级元素的部分特性
例如: 可以设置宽和高，但不会独占一行
浮动元素间接影响块级元素布局
块级元素会当浮动不存在
浮动影响行内元素的布局
但是行内元素又影响块级元素的布局
即，浮动间接影响块级元素
浮动元素尽可能靠近包含块的内边界
即：左浮动的元素尽可能往左排列，并且尽可能的靠近包含块的左内边界
浮动的盒子只会在包含块的内容区域游走
html
<div style="border: 2px solid; padding-right: 10px;">
<div style="float: left; border: 1px solid red;">1 left </div>
<div style="float: right; border: 1px solid red;">2 right</div>
3 这里有很多文字这里有很多文字这里有很多文字这里有很多文字这里有很多文字
这里有很多文字这里有很多文字这里有很多文字这里有很多文字这里有很多文字
<div style="width: 50%; float: right; border: 1px solid red;">4 right</div>
</div>1 left
2 right
3 这里有很多文字这里有很多文字这里有很多文字这里有很多文字这里有很多文字 这里有很多文字这里有很多文字这里有很多文字这里有很多文字这里有很多文字 4 right
浮动元素不能超出包含块的内边界
即：左浮动元素的左外边界最远只能到达包含块的左内边界，右外边界最远只能到达包含块的右内边界
特例： 宽度设置的太宽(e.g: 5号元素)
负边界(e.g: 6号元素)
相对定位(e.g: 8号元素)
html
<div style="height: 120px; border: 2px solid;">
<div style="float: left; border: 1px solid red; width: 30%;">1</div>
<div style="float: left; border: 1px solid red; width: 30%;">2</div>
<div style="float: left; border: 1px solid red; width: 30%;">3</div>
<div style="float: left; border: 1px solid red; width: 30%;">4</div>
<div style="float: left; border: 1px solid red; width: 110%;">5</div>
<div style="float: left; border: 1px solid red; margin-left: -8px;">6</div>
<div style="float: left; border: 1px solid red;">7</div>
<div style="float: left; border: 1px solid red; width: 100%; position: relative; left: -12px;">8</div>
</div>1
2
3
4
5
6
7
8
浮动元素堆叠但不重叠
所有的浮动元素会挤在一块，但是不会出现重叠的现象
浮动找浮动，不浮动找不浮动
5号元素是另一个包含块的元素，同样受到了前面浮动元素的影响
特例：
负边界(e.g: 7号元素)
相对定位(e.g: 8号元素)
html
<div style="border: 2px solid;">
<div style="float: left; border: 1px solid red;">1</div>
<div style="float: left; border: 1px solid red; height: 50px;">2</div>
<div style="float: left; border: 1px solid red; width: 50px;">3</div>
<div style="float: left; border: 1px solid red; height: 30px;">4</div>
</div>
<div style="border: 2px solid;">
<div style="float: left; border: 1px solid red;">5</div>
</div>
<div style="border: 2px solid; height: 78px; margin-top: 60px;">
<div style="float: left; border: 1px solid red; width: 30%; height: 32px;">6</div>
<div style="float: left; border: 1px solid red; width: 30%; margin-left: -4px;">7</div>
<div style="float: left; border: 1px solid red; width: 30%; position: relative; left: -4px;">8</div>
</div>1
2
3
4
5
6
7
8
浮动元素不能超过前一个浮动元素的最高点
即： 只要前方有浮动元素，该浮动元素就不能超过前方浮动元素的最高点(即外边界)
浮动的元素会按照顺序依次排列
即使1号元素后面可以放的下3号元素，但是3号元素在 DOM 结构上处于2号元素之后，所以3号元素不能超过2号元素的最高点
特例：负边界/相对定位
1
2
3
1
2
3
左浮动的元素不能出现在前一个浮动元素左边线左侧
即： 一个左浮动的元素不能出现在前一个浮动元素的左边线的左侧区域，即使有足够的空间也是不允许的
4号元素在3号元素之后，即使1号元素下面有足够的空间，但是4号元素依然不可以往上跑，换行之后只能在3号元素边界以下
特例：负边界/相对定位
html
<div style="border: 2px solid; height: 110px;">
<div style="float: left; border: 1px solid red; width: 30%;">1</div>
<div style="float: left; border: 1px solid red; width: 30%; height: 60px;">2</div>
<div style="float: left; border: 1px solid red; width: 30%; height: 70px;">3</div>
<div style="float: left; border: 1px solid red; width: 12%;">4</div>
</div>1
2
3
4
浮动和文字
文字会出现在左浮动元素的右侧
即： 在文字中出现浮动的元素，左浮动的元素会向左移，直到所在行的所有文字出现在浮动元素的右侧
特例：负边界/相对定位
html
<div style="border: 2px solid;">
这里是文字这里是文字这里是文字这里是文字这里是文字这里是文字
<div style="float: left; border: 1px solid red;">left</div>
<div style="float: right; border: 1px solid red;">right</div>
这里是文字这里是文字这里是文字这里是文字这里是文字这里是文字
</div> 这里是文字这里是文字这里是文字这里是文字这里是文字这里是文字
left
right
这里是文字这里是文字这里是文字这里是文字这里是文字这里是文字 浮动的元素不能超过所在文本行框的最高点
浮动出现在文本内时不会跨行显示，并且不会超过所在文本行框的最高点
特例：负边界/相对定位
html
<div style="border: 2px solid;">
这里是文字这里是文字这里是文字这里是文字这里是文字这里是文字
这里是文字这里是文字这里是文字这里是文字这里是文字这里是文字
<i>浮动</i>
<div style="float: right; border: 1px solid red;">right</div>
<i>所在行</i>
这里是文字这里是文字这里是文字这里是文字这里是文字这里是文
<i>浮动</i>
<div style="float: left; border: 1px solid red;">left</div>
<i>所在行</i>
</div> 这里是文字这里是文字这里是文字这里是文字这里是文字这里是文字 这里是文字这里是文字这里是文字这里是文字这里是文字这里是文字 浮动
right
所在行 这里是文字这里是文字这里是文字这里是文字这里是文字这里是文 浮动left
所在行浮动和块
块级元素会把后面出现的浮动元素拒之门外，2号浮动元素，不会和1号块级元素重叠
但是2和3号元素会出现重叠，即：浮动元素后面的块级元素会忽略前面的浮动元素
同样4号元素不会和3号元素重叠
html
<div style="border: 2px solid;">
<div style="width: 30%; background: skyblue;">1 </div>
<div style="float: left; border: 1px solid red; height: 24px;">2 left</div>
<div style="width: 30%; background: pink;">3 </div>
<div style="float: left; border: 1px solid red;">4 left</div>
</div>1
2 left
3
4 left
浮动元素和块级元素以及行内元素重叠时的表现形式
行内元素与一个浮动元素重叠时，其边框、背景和内容都在浮动元素“上方”显示
块级元素与一个浮动元素重叠时，其边框、背景在浮动元素的“下方”显示，而内容在浮动元素的“上方”显示
html
<div style="border: 2px solid;">
<div style="height: 30px; border: 1px solid; background-color: pink; color: red;">block</div>
<div style="float: left; height: 60px; margin: -28px -10px 0 0; background-color: yellow;">float<br>float</div>
<span style="border: 1px solid; background-color: skyblue;">inline-block</span>
</div>block
float
float
inline-blockfloat
总结
- 会创建一个BFC
- 自身元素会生成一个块框
- 浮动元素(以左浮动为例)基于包含块或者前一个浮动元素进行布局
- 浮动元素始终出现在包含块的上内边距或左内边界的边缘或前一个浮动元素的底边界的水平线上或右边界的垂直线线上
- 块级元素会把后面出现的浮动元素拒之门外，而浮动元素后面的块级元素会忽略前面的浮动元素
- 浮动元素不会超过行框
清除浮动
浮动的元素，会创建一个叫BFC的东西
BFC（Block formatting contexts）即：块级格式化上下文，有点类似于JS中的作用域，它是一个独立的渲染区域（BFC框里面的内容不受外界影响）
W3C 官方给出的BFC解释 block-formatting
清除浮动所带来的什么影响？
怎么清除浮动带来的影响？
清除浮动造成盒子塌陷的影响
利用clear属性或者BFC的一些渲染规则来清除浮动的影响
方案1: clear 属性
clear: left | right | both | none;clear 属性使当前元素的 左/右/左和右不能有浮动的元素clear 属性只对块级元素起作用
html
<!-- 没有清除浮动的盒子 -->
<div style="border: 2px solid; height: 78px;">
<div style="float: left; border: 1px solid red; height: 24px;">1 left</div>
<div style="background: pink;">2 </div>
<div style="float: left; border: 1px solid red;">3 left</div>
</div>
<!-- 增加了清除浮动的盒子 -->
<div style="border: 2px solid; height: 78px;">
<div style="float: left; border: 1px solid red;">4 left</div>
<div style="background: pink; clear: left;">5 </div>
<div style="float: left; border: 1px solid red;">6 left</div>
</div>
<!-- 在行内元素上增加了清楚浮动 实效的 -->
<div style="border: 2px solid; height: 78px;">
<div style="float: left; border: 1px solid red;">7 left</div>
<span style="background: pink; clear: left;">8 </span>
<div style="float: left; border: 1px solid red;">9 left</div>
</div>1 left
2
3 left
4 left
5
6 left
7 left
8 9 left
方案2: 添加空的clear元素
利用clear属性，在受浮动元素影响的塌陷盒子的最底部添加一个空的元素，并设置clear: both;
html
<div style="border: 2px solid;">
<div style="float: left; border: 1px solid red;">float</div>
<div style="clear: both;"></div>
</div>float
方案3: 伪元素
同样利用clear属性，减少空元素
html
<style>
.clearfix::after {
content: "";
display: block;
clear: both;
}
</style>
<div class="clearfix" style="border: 2px solid;">
<div style="float: left; border: 1px solid red;">float</div>
</div>float
方案4: overflow: hidden
通过给父盒子设置overflow: hidden;属性，来创建一个BFC渲染隔离区，从而消除对外界元素的影响
html
<div style="overflow: hidden; border: 2px solid;">
<div style="float: left; border: 1px solid red;">float</div>
</div>float
方案5: display: table|table-cell|flow-root
通过给父盒子设置display: table|table-cell|flow-root; 原理同上
html
<div style="display: table; border: 2px solid;">
<div style="float: left; border: 1px solid red; height: 50px;">float1</div>
display: table;
</div>
<div style="display: table-cell; border: 2px solid;">
<div style="float: left; border: 1px solid red; height: 50px;">float2</div>
display: table-cell;
</div>
<div style="display: flow-root; border: 2px solid;">
<div style="float: left; border: 1px solid red; height: 50px;">float2</div>
display: flow-root;
</div>float1
display: table; float2
display: table-cell; float2
display: flow-root; 方案6: 父元素设置浮动
通过给父盒子设置浮动开启BFC来进行隔离
html
<div style="float: left; border: 2px solid;">
<div style="float: left; border: 1px solid red; height: 50px;">float1</div>
float2
</div>float1
float2