我是 HTML/CSS 的初学者，只是一些关于浮动元素的问题，下面是代码
section {
border: 1px solid blue;
}
div {
margin: 5px;
width: 200px;
height: 50px;
}
.left {
float: left;
background: pink;
}
.left_second {
position:relative;
background: blue;
}
.right {
float: right;
background: cyan;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device_width,initial-scale=1.0">
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href="makeup.css">
</head>
<body>
<section>
<div class="left">1</div>
<div class="left_second">2</div>
<div class="right">3</div>
</section>
</body>
</html>
所以我的问题是：
据说浮动元素已从页面的正常流程中删除，但仍保留为流程的一部分（与绝对定位相反）。但“仍然是流程的一部分”到底是什么意思呢？正如我们所看到的，第二个 div 与第一个 div 重叠，这意味着第一个 div 不再是流程的一部分？唯一可以使它“仍然是流程的一部分”的就是设置float:left在第二个div上，那么第二个div位于第一个div的右侧，这看起来第一个div确实存在于流中，我的理解正确吗？
为什么第三个 div 位于包含块之外？为什么它不像第一个和第二个 div 那样不在包含块内？
它仍然是流程的一部分，因为文本仍然环绕浮动，因此它们仍然被视为流程的一部分，与此不同position:absolute不再影响流程的元素。
The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow (in contrast to absolute positioning).ref
为了回答您的问题，让我们逐步添加属性。
最初我们有这个：
section {
border: 1px solid blue;
}
div {
margin: 5px;
width: 200px;
height: 50px;
}
.left {
/*float: left;*/
background: pink;
}
.left_second {
position:relative;
background: blue;
}
.right {
/*float: right;*/
background: cyan;
}
<section>
<div class="left">1</div>
<div class="left_second">2</div>
<div class="right">3</div>
</section>
没有浮动元素，每个 div 占一行，并且所有这些都位于该部分的边框内。让我们浮动第一个，让蓝色背景有点透明，然后删除最后一个 div。
section {
border: 1px solid blue;
}
div {
margin: 5px;
width: 200px;
height: 50px;
}
.left {
float: left;
background: pink;
}
.left_second {
position:relative;
background: rgba(0,0,255,0.4);
}
.right {
/*float: right;*/
background: cyan;
}
<section>
<div class="left">1</div>
<div class="left_second">2</div>
<!--<div class="right">3</div>-->
</section>
正如您所看到的，蓝色 div 与浮动元素完全重叠，并且蓝色 div 的文本位于外部。在这里你面临着溢出问题。让我们增加蓝色框的宽度以便更好地看到：
section {
border: 1px solid blue;
}
div {
margin: 5px;
width: 200px;
height: 50px;
}
.left {
float: left;
background: pink;
}
.left_second {
position:relative;
width:300px;
background: rgba(0,0,255,0.4);
}
.right {
/*float: right;*/
background: cyan;
}
<section>
<div class="left">1</div>
<div class="left_second">2</div>
<!--<div class="right">3</div>-->
</section>
如您所见，文本 (2）在浮动元素之后开始，并且不要与它重叠，因为与块元素不同，文本环绕浮动元素。换句话说，蓝色 div 将从浮动元素的顶部开始，而不是其内容，如果尺寸减小，文本将被推到下一行并溢出：
section {
border: 1px solid blue;
}
div {
margin: 5px;
width: 200px;
height: 50px;
}
.left {
float: left;
background: pink;
}
.left_second {
position:relative;
width:300px;
background: rgba(0,0,255,0.4);
transition:1s;
}
.left_second:hover {
width:200px;
}
.right {
/*float: right;*/
background: cyan;
}
<section>
<div class="left">1</div>
<div class="left_second">2 (hover me)</div>
<!--<div class="right">3</div>-->
</section>
您可能还注意到only蓝色 div 被该部分的蓝色边框包围，因为它是唯一的非浮动元素，并且由于它与粉红色重叠，因此该元素也必然在那里。如果你删除蓝色的 div，你会看到粉色的在外面：
section {
border: 1px solid blue;
}
div {
margin: 5px;
width: 200px;
height: 50px;
}
.left {
float: left;
background: pink;
}
.left_second {
position:relative;
width:300px;
background: rgba(0,0,255,0.4);
transition:1s;
}
.left_second:hover {
width:200px;
}
.right {
/*float: right;*/
background: cyan;
}
<section>
<div class="left">1</div>
<!--<div class="left_second">2</div> -->
<!--<div class="right">3</div>-->
</section>
现在，如果我们重新添加第三个 div，它将从蓝色 div 的底部和该部分内部开始：
section {
border: 1px solid blue;
}
div {
margin: 5px;
width: 200px;
height: 50px;
}
.left {
float: left;
background: pink;
}
.left_second {
position:relative;
background: rgba(0,0,255,0.4);
}
.right {
/*float: right;*/
background: cyan;
}
<section>
<div class="left">1</div>
<div class="left_second">2</div>
<div class="right">3</div>
</section>
如果将其向右浮动，它将放置在右侧且位于该部分之外：
section {
border: 1px solid blue;
}
div {
margin: 5px;
width: 200px;
height: 50px;
}
.left {
float: left;
background: pink;
}
.left_second {
position:relative;
background: rgba(0,0,255,0.4);
}
.right {
float: right;
background: cyan;
}
<section>
<div class="left">1</div>
<div class="left_second">2</div>
<div class="right">3</div>
</section>
这就是为什么我们需要清除浮动以避免重叠效应和outside effect:
section {
border: 1px solid blue;
overflow:hidden; /*make the float inside*/
}
div {
margin: 5px;
width: 200px;
height: 50px;
}
.left {
float: left;
background: pink;
}
.left_second {
position:relative;
clear:left; /*clear left float*/
background: rgba(0,0,255,0.4);
}
.right {
float: right;
background: cyan;
}
<section>
<div class="left">1</div>
<div class="left_second">2</div>
<div class="right">3</div>
</section>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
