CSS补充知识-浮动

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，这样设置之后父级元素会紧紧包裹着子级元素，没有空隙。

猜你喜欢