zoukankan      html  css  js  c++  java
  • 清除浮动的方法

    一、浮动的定义

      使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻的浮动元素停了下来。

      文档流:文档流是文档中可显示对象在排列时所占用的位置。

      float常跟属性值left、right、none

    二、浮动的用途

      可设置文字环绕或使元素宽度由内容填充(类似Inline-block)。

      使用浮动需要注意的是如果浮动的元素高度比父级容器还高,那么需要设置父级容器的overflow属性为auto,使其自动撑满。

    三、实例

      如下代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>浮动测试</title>
        <style type="text/css">
    .box {
        border: 5px solid black;
        background: #fc9;
        color: black;
        margin: 50px 50px;
        padding: 50px;
    }
    .div1 {
        width: 100px;
        height: 100px;
        background: gainsboro;
    }
    .div2 {
        width: 100px;
        height: 100px;
        background: pink;
    }
    .div3 {
        width: 100px;
        height: 100px;
        background: yellowgreen;
    }
        </style>
    </head>
    <body>
    <div class="box">
        <div class="div1">div1</div>
        <div class="div2">div2</div>
        <div class="div3">div3</div>
    </div>
    </body>
    </html>

       结果如下图:

      我们想要div1,div2和div3并列到一行,我们在每个div样式中都加一个float:left。结果如下图所示:

      从图可以看出,结果并不是我们想要的。

      因为浮动元素脱离了普通流,会出现一种高度坍塌的现象:原来的父容器高度是被子元素撑开的,但是当子元素浮动后,脱离普通流浮动起来,那父容器的高度就坍塌。

      所以我们需要清除浮动。

    四、清除浮动方法

      方法一:添加新元素,应用clear:both;

      HTML:

    <div class="box">
        <div class="div1">div1</div>
        <div class="div2">div2</div>
        <div class="div3">div3</div>
        <div class="clear"></div>
    </div>

      CSS:

    .clear{
        clear: both;
    }

      方法二:父级div定义overflow:hidden;

      CSS:

    .box {
        border: 5px solid black;
        background: #fc9;
        color: black;
        margin: 50px 50px;
        padding: 50px;
        overflow: hidden;
    }

      原理:

      当给父元素设置"overflow:hidden"时,实际上创建了一个超级属性BFC,此超级属性反过来决定了"height:auto"是如何计算的。在“BFC布局规则”中提到:计算BFC的高度时,浮动元素也参与计算。因此,父元素在计算其高度时,加入了浮动元素的高度,“顺便”达成了清除浮动的目标,所以父元素就包裹住了子元素。

      方法三:在父级样式添加伪元素:after或者:before

      CSS:
    .box {
        border: 5px solid black;
        background: #fc9;
        color: black;
        margin: 50px 50px;
        padding: 50px;
    }
    .box:after{
        content: '';
        display: block;
        clear: both;
    }

       原理:

      父级元素的最后,添加了一个:after伪元素,通过清除伪元素的浮动,达到撑起父元素高度的目的。

      注意到该伪元素的display值为block,即伪元素是一个不可见的块级元素。

      用以上三种方法清除浮动的结果均如下图所示:

  • 相关阅读:
    Apache 虚拟主机 VirtualHost 配置
    EAX、ECX、EDX、EBX寄存器的作用
    Python中文文档 目录(转载)
    八度
    POJ 3268 Silver Cow Party (最短路)
    POJ 2253 Frogger (求每条路径中最大值的最小值,Dijkstra变形)
    2013金山西山居创意游戏程序挑战赛——复赛(1) HDU 4557 非诚勿扰 HDU 4558 剑侠情缘 HDU 4559 涂色游戏 HDU 4560 我是歌手
    HDU 4549 M斐波那契数列(矩阵快速幂+欧拉定理)
    UVA 11624 Fire! (简单图论基础)
    HDU 3534 Tree (树形DP)
  • 原文地址:https://www.cnblogs.com/gg-qq/p/11004160.html
Copyright © 2011-2022 走看看