CSS中分有盒模型、层模型、浮动模型。当两个块级元素中第一个块级元素浮动时,第二块级元素会占据第一个原来的位置,第一会覆盖住第二个,然而这不是层模型中的层次覆盖。浮动元素产生了浮动流,所有产生了浮动流的元素,块级元素都是看不见的,也就会覆盖它们,
.box1{
width:100px;
height:100px;
background-color:black;
float:left;
}
.box2{
width:150px;
height:150px;
background-color:red;
}
上述CSS代码修饰了两个div盒子,效果如下,
浮动流是使用浮动的后续影响,这种影响往往会妨碍到浮动元素之后的元素,但触发了bfc的元素和文本类属性(含inline的元素)的元素以及文本都能够看到浮动元素,因此可以将后面的元素设置触发bfc。
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。
浮动中还有一个经典的问题,父级的块级元素在子级块级元素发生浮动时,没有手动设置高度的父级元素高度消失,因为它看不到浮动元素,没有子级元素就撑不起它的高度,这也算是浮动流的一个影响了。
<div class="wrapper">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
</div>
.wrapper{
border:3px solid black;
}
.content{
width:100px;
height:100px;
background-color: #ccc;
float:left;
}
清除浮动的解决方法如下,
1、在父级元素最后增添一个清除元素,专门用于清除浮动,
<div class="wrapper">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<p class="clear"></p>
</div>
.clear{
clear:both;
}
然而这种方式很不好,它修改了HTMl的结果,增添了一个在结构上毫无意义的标签,这是需要避免的。
2、使用伪元素清除浮动
伪元素天生存在于任何元素中,它只是没有HTML结果,但在CSS中可对其进行操作。并且伪元素是行级元素,但它清除浮动的前提一定要是块级元素,因为这也是clear使用的前提。
/* 在不修改HTMl结果的情况下用伪元素 */
.wrapper::after{
content:"";
display: block;
clear:both;
}
3、除了清除浮动的方法之外,解决父级元素包裹不了浮动的子级元素问题,可以让父级元素触发bfc,给父级元素添加浮动(float:left|right)、定位(position:absolute)、display:inline-block,此处所谓的添加浮动和定位,其实和设置display效果一样,是因为会从系统内部把元素转换为inline-block,这样设置之后父级元素会紧紧包裹着子级元素,没有空隙。
关注我吧
关注「前端一起学」公众号 ,看着项目进阶学习,让我们一起学前端,一起进步。