CSS浮动特性

浮动元素的特性

1. 文本能看到浮动。
2. 浮动元素后面不是块级元素，后面的元素将会和它并排，除非设置了元素的宽度，并且屏幕放不下时将会换行，产生了BFC的元素和inline元素及文本可以看到float元素。
3. 浮动元素的上一个元素如果没有浮动，浮动只在当前行浮动；当浮动遇到浮动，它们将在一行排序，除非当前行剩下位置不够了
4. 当元素设置定位值为absolute、fixed时，浮动将被忽略，行内元素也可以浮动，且浮动之后可以设置width，height，margin等
5. float引起父元素高度塌陷

 

使用clear要注意的地方

1. clear只会清除自身所在位置的前面的元素的浮动，他清除浮动这个动作只能影响自身的位置，而不能影响其他元素的位置，clear:right 并不能清除在其后面浮动的元素，其含义是清除在其前面的但是是右浮动的元素
2. clear属性只作用在块级元素上

 

演示

1.文本能看到浮动

这个其实就不用演示了，算是最简单的一种，因为浮动的最初设计就是用来实现文字环绕的，所以文字能看到浮动，然后环绕在其周围。

2.浮动元素后面不是块级元素，后面的元素将会和它并排，除非设置了元素的宽度，并且屏幕放不下时将会换行，产生了BFC的元素和inline元素及文本可以看到float元素

.item1 {
    float: left;
    background-color: pink;
}

.item2 {
    display: inline-block;
    background-color: #58d3e2;
}


<div class="item1">item1</div>
<div class="item2">item2</div>

3.浮动元素的上一个元素如果没有浮动，浮动只在当前行浮动；当浮动遇到浮动，它们将在一行排序，除非当前行剩下位置不够了

上一个元素没有浮动，当前浮动元素在当前行浮动

.item1 {
    background-color: pink;
}

.item2 {
    float: left;
    background-color: #58d3e2;
}

<div class="item1">item1</div>
<div class="item2">item2</div>

4.当元素设置定位值为absolute、fixed时，浮动将被忽略 

div {
    position: absolute;
    float: right;
    width: 100px;
    height: 100px;
    border: 1px solid red;
}

span{
    float: right;
    width: 100px;
    background-color: #c1c1c1;
    height: 100px;
}

<div class="item1">浮动与定位</div>
<span >你好</span>

 

5.父元素高度塌陷

.item{
    float: left;
    width:100px;
    height:100px;
    background-color: pink;
}

<div class="box">
    <div class="item"></div>
</div>

解决办法，

1.给父元素增加“overflow:hidden"

当然也可以是"overflow：auto"。但为了兼容IE最好用overflow:hidden。

.box{
  overflow:hidden;
}

那么为什么“overflow:hidden"会解决这个问题呢？

是因为“overflow:hidden”会触发BFC，BFC反过来决定了"height:auto"是如何计算的

，即计算BFC的高度时，浮动元素也参与计算，因此此时父元素会自适应浮动元素的高度。

所以呢，也可以设置"display:inline-block"、"position:absolute"、"float:left"来解决父元素高度坍塌的问题。因为凡是能创建一个BFC，就能达到包裹浮动子元素的效果。因此网上都说成“BFC能包裹浮动元素”.

2.在父元素内容的后面或者前面增加伪元素+清除浮动

可以给父元素的内容添加一个伪元素，可以用::before或者::after，然后内容为空，这样就不会占据位置，最后为伪元素加上“clear:both"来清除浮动。

 <style>
        body,div{
            margin:0;
            padding:0;
        }
        .box::after{
            content: '';
            display: block;
            clear:both;
        }
        .item{
            float:left;
            width:100px;
            height: 100px;
            background-color: deeppink;
        }
</style>
<div class="box">
    <div class="item"></div>
</div>

为什么这样可以呢？

弄清原因需要知道两点：一是伪元素的实际作用，二是css的清除浮动（clear)只能影响使用清除的元素本身，不能影响其他元素,并且清除浮动可以理解为打破横向排列。

首先需要搞清除::after和::before起的作用，它们不是在一个元素的后面或者前面插入一个伪元素，而是会在元素内容后面或者前面插入一个伪元素(是在元素里面)，之前我一直以为:before和:after伪元素 插入的内容会被注入到目标元素的前或后注入，其实注入的内容将是有关联的目标元素的子元素，但它会被置于这个元素的任何内容的“前”或“后”。我们来举个例子，可以看到.box的高度为300px,说明两个伪元素已经插入到.box内容里了。

::before和::after必须配合content属性来使用，content用来定义插入的内容，content必须有值，至少是空。默认情况下，伪类元素的display是默认值inline，可以通过设置display:block来改变其显示

 <style>
        body,div{
            margin:0;
            padding:0;
        }
        .box::before{
            content: 'before';
            height: 100px;
            width: 100px;
            display: block;
            clear:both;
            background-color: #61dafb;
        }
        .box::after{
            content: 'after';
            width:100px;
            height:100px;
            display: block;
            clear:both;
            background-color: aquamarine;
        }
        .item{
            float:left;
            width:100px;
            height: 100px;
            background-color: deeppink;
        }

    </style>
<div class="box">
    <div class="item"></div>
</div>

看到没有，其实是在box的内部 ，所以我们可以利用父元素的before或者after来清除浮动在

父元素的内容前后插入一个伪元素，content为空可以保证不占据位置（高度为0）。"clear:both"可以清除父元素左右的浮动，导致.box::before和.box::after遇到浮动元素会换行，从而会撑开高度，父元素会自适应这个高度从而不会出现高度坍陷。

 

 

如何触发BFC，以下规则只要满足任意一条，即可触发

1. 根元素
2. float 的值不为 none
3. overflow 的值为 auto、scroll 或 hidden
4. display 的值为 table-cell、table-caption 和 inline-block 中的任何一个
5. position 的值不为 relative 和 static

BFC的一些特性计算BFC高度时

1. 浮动元素也会参与计算(用来解决父元素高度塌陷问题）
2. 是一个独立的容器，外面元素不会影响他里面的元素
3. BFC元素不会与浮动元素的盒子相互重叠（解决兄弟元素排版混乱问题）