CSS浮动 | 前小小

浮动元素脱离文档流

使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在该元素的周围。

<pre style="margin: 0px; padding: 0px; overflow: auto; overflow-wrap: break-word; font-family: &quot;Courier New&quot; !important; font-size: 12px !important;"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.first {
width: 200px;
height: 200px;
border: 3px solid red;
float: left;
}
.second {
width: 200px;
height: 100px;
border: 3px solid blue;
}
</style>
</head>

<body>
<div class="first">123</div>
<div class="second">456</div>
</body>
</html>
</pre>

外部距塌陷问题

1，当上下相邻的两个块级元素相遇，上面的元素有下边距margin-bottom，下面的元素有上边距margin-top，则它们之间的垂直距离取两个值中的较大者。

<style>
.box1 {
width: 150px;
height: 100px;
margin-bottom: 20px;
background-color: rgb(201, 239, 98);
}
.box2 {
width: 100px;
height: 100px;
background-color: rebeccapurple;
margin-top: 10px;
}
</style>
<div class="box1"></div>
<div class="box2"></div>

这时候两个盒子之间的垂直距离不是30px，而是20px。

解决方法： 尽量只给一个盒子添加margin值。

2.对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者。

<style>
.box1 {
width: 150px;
height: 100px;
margin-top: 20px;
/* border: 1px solid #000000; */
background-color: red;
}
.box2 {
width: 100px;
height: 100px;
/* border: 1px solid #000000; */
background-color: rebeccapurple;
margin-top: 10px;
}
</style>
</head>

<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>

这时候两个盒子会发生合并，上外边距为20px。

解决办法： ①给父元素定义上边框 ②给父元素定义上内边距 ③给父元素添加 overflow：hidden； ④添加浮动 ⑤添加绝对定位

3.如果存在一个空的块级元素，border、padding、inline content、height、min-height都不存在，那么上下边距中间将没有任何阻隔，上下外边距将会合并。

<p style="margin-bottom: 0px;">这个段落的和下面段落的距离将为20px</p>
<div style="margin-top: 20px; margin-bottom: 20px;"></div>
<p style="margin-top: 0px;">这个段落的和上面段落的距离将为20px</p>

可以理解成中间div宽度为0且上下边距融合，只取margin的最大值。

清除浮动的方式

1，使用额外标签法： 在浮动的盒子之下再放一个标签，在这个标签中使用clear:both，来清除浮动对页面的影响。

.clearfix{
       clear: both;
           }
<div class="clearfix"></div>

a.内部标签：会将这个浮动盒子的父盒子高度重新撑开 b.外部标签：会将这个浮动盒子的影响清除，但是不会撑开父盒子。注意：一般情况下不会使用这一种方式来清除浮动。因为这种清除浮动的方式会增加页面的标签。

2，使用overflow属性来清除浮动： 先找到浮动盒子的父元素，再在父元素中添加一个属性，就是清除这个父元素中的子元素浮动对页面的影响。

overflow: hidden;

3，使用伪元素来清除浮动：

.clearfix:after {
content: "";//添加内容为空
height: 0;//内容高度为0
line-height: 0;//内容文本的高度为0
display: block;//将文本设置为块级元素
clear: both;//清除浮动
visibility: hidden;//将元素隐藏
}
.clearfix {
zoom: 1;/*为了兼容ie6*/
}