WithCoderWithCoderWithCoder

css浮动属性float简介

    在css中,元素的布局默认是遵循常规流的。即正常情况下,页面元素总是安装块元素独占一行从上到下进行布局,内联元素从左到右的方式进行布局,这种被称为常规流。但是有很多情况,我们希望块元素从左到右水平布局,常规流是没办法实现的。因此我们需要一些手段来破坏流,从而实现一些特殊的布局,而浮动属性float就具备破坏流的特性。

    float的本质

    float设计的初衷并不是用来布局的,其出现的意义仅仅是实现图片文字环绕效果,即图片左浮动(或右浮动),文字环绕图片。如下代码:   

    <style>
        img {
            /* 图片左浮动或右浮动,实现文字环绕效果 */
            floatleft;
            /* float: right; */
        }
    </style>
    <div>
        <img src="./images/bg.png" alt="">
        <p>
            浮动float设计的初衷并不是用来布局的,其出现的意义仅仅是实现图片文字环绕效果,即图片左浮动(或右浮动),文字环绕图片。
            浮动float设计的初衷并不是用来布局的,其出现的意义仅仅是实现图片文字环绕效果,即图片左浮动(或右浮动),文字环绕图片。
        </p>
    </div>

    实现效果如下图:

    1-20040Z94234328.png

    float的特性

    一个元素设置了float属性,会表现出如下特性:

    破坏性

    float破坏了父标签的原本结构,使得父标签出现了“坍塌”现象。导致这一现象的最根本原因在于:被设置了float的元素会脱离文档流。 

    <style>
        div {
            border1px solid red;
            padding5px;
        }

        .box1>img {
            /* 图片浮动后,造成父元素高度塌陷 */
            /* float: left; */
        }
    </style>
    <div class="box1">
        <img src="./images/bg.png" alt="">
    </div>

    上述代码img没有开启浮动时,表现如下(父元素div被img高度撑开):

    1-200409103104J3.png

    如果去掉float注释,开启img浮动,表现如下(父元素div高度“塌陷”):

    1-200409103041B5.png

    

    包裹性

    包裹性就是浮动父元素的宽度会收缩到和内部元素宽度一样如下代码:

    <style>
        div {
            /* float: left; */
            border1px solid red;
        }
    </style>
    <div class="box1">
        <span>Hello world</span>
    </div>

    没有开启浮动时,div没有设置width,但div会独占一行,如下图:

     1-200409110139244.png

    而如果给div增加float:left之后,它的宽度发生了变化,看起来是把内容包裹起来了。div设置了float之后,其宽度会自动调整为包裹住内容宽度,而不是撑满整个父容器,如下图:

    1-200409123220221.png

    清除浮动

    float具有“破坏性”,它会导致父元素“坍塌”,在需要时我们可以“清除浮动”来避免这种情况。这里介绍几种清除浮动的方法:

    1. 使用 clear 属性

    <div style="clear:both;"></div>

    直接在父元素的最后放一个子标签<div style="clear:both;"></div>,这个方法兼容性强,使用方便,但不好的地方就是会增加一个无用的标签。

    2. 为父元素添加overflow:hidden

    这样处理后,父元素就有高度了 ,父元素的高度便不会被破坏。不过这样处理,子元素如果是margin负值定位或是负的绝对定位,就会导致子元素被裁减。

    3. 使用伪元素,创建一个clearfix样式,将类添加到父元素标签中,代码如下(这个经常使用):

    .clearfix::after {
            content"";
            displaytable;
            clearboth;
    }

     原理和1类似,其实就是通过伪元素选择器,在div后面增加了一个clear:both的元素。

欢迎分享交流,转载请注明出处:WithCoder » css浮动属性float简介