浮动以及清楚浮动的方法

发表于 | 分类于 | 阅读次数

浮动(Float)

css中的浮动(float)，会使元素向左或向右浮动，直到它的外边缘碰到包含框或者另一个浮动框的边框为止，其周围也会重新排列。浮动元素会脱离文档流，且不能通过left、right、top、bottom来确定元素的位置，所以文档普通流中的块框表现得就像浮动框不存在一样。

浮动带来的副作用

  • 块状元素，会钻进浮动元素的下面，被浮动元素所覆盖；
  • 行内元素，例如文字，则会环绕在浮动元素的周围，为浮动元素留出空间呢；
  • 浮动元素的父元素会出现坍缩；
    如果不希望出现以上这些效果，就需要清楚浮动来解决后患，使后面的元素表现得跟浮动前一样，这样既实现了元素的浮动，又使后来的元素不会受其影响产生不必要的麻烦。

清楚浮动常用的5中方法

清楚浮动的方法有很多种，本文中只记录了常用的5种。

父级div定义height
  • 原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题；
  • 优点：简单、代码少、容易掌握；
  • 缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题；
  • 实现代码：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    <!DOCTYPE HTML>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>清楚浮动：父级div定义height</title>
        <style type="text/css">
           .div1{
           	   background-color: #762564;
           	   border:1px solid #ccc;
           	   color: #fff;
           	   /*清除浮动代码*/
           	   height: 200px;
           }
           .div2{
           	   background-color: #656532;
           	   border:1px solid #ddd;
           	   height: 100px;
           	   margin-top: 10px;
           	   color: #fff;
           }
           .left{
           	   float: left;
           	   width: 20%;
           	   height: 200px;
           	   background: red;
           }
           .right{
           	   float: right;
           	   width: 30%;
           	   height: 80px;
           	   background: green;
           }
        </style>
    </head>
    <body>
       <div class="div1">
       	   <div class="left">Left</div>
       	   <div class="right">Right</div>
       </div>
       <div class="div2">div2</div>
    </body>
    </html>
结尾处加空div标签，clear:both
  • 原理：添加一个空div，利用css提供的clear:both清楚浮动，让父级div能自动获取到高度；
  • 优点：简单、代码少、浏览器支持好、不容易出现奇怪的问题；
  • 缺点：如果页面浮动布局多，就要增加很多空div；
  • 实现代码：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    <!DOCTYPE HTML>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>结尾处加空div标签clear both </title>
        <style type="text/css">
           .div1{
           	   background-color: #762564;
           	   border:1px solid #ccc;
           	   color: #fff;
           }
           .div2{
           	   background-color: #656532;
           	   border:1px solid #ddd;
           	   height: 100px;
           	   margin-top: 10px;
           	   color: #fff;
           }
           .left{
           	   float: left;
           	   width: 20%;
           	   height: 200px;
           	   background: red;
           }
           .right{
           	   float: right;
           	   width: 30%;
           	   height: 80px;
           	   background: green;
           }
           /*清楚浮动代码*/
           .clearfloat{
           	   clear:both;
           }
        </style>
    </head>
    <body>
       <div class="div1">
       	   <div class="left">Left</div>
       	   <div class="right">Right</div>
       	   <div class="clearfloat"></div>    <!--结尾处加空标签-->
       </div>
       <div class="div2">div2</div>
    </body>
    </html>
父级div定义，伪类 :after和zoom
  • 原理：IE8以上和非IE浏览器才支持 :after，原理和方法2有些类似，zoom(IE专有属性)可解决IE6、IE7浮动问题；
  • 优点：浏览器支持好、不容易出现奇怪的问题(目前：大型网站都有使用)；
  • 缺点：代码多(定义公共类可减少代码)，要两句代码结合使用才能让主流浏览器都支持；
  • 实现代码：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    <!DOCTYPE HTML>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>结尾处加空div标签clear both </title>
        <style type="text/css">
           .div1{
           	   background-color: #762564;
           	   border:1px solid #ccc;
           	   color: #fff;
           }
           .div2{
           	   background-color: #656532;
           	   border:1px solid #ddd;
           	   height: 100px;
           	   margin-top: 10px;
           	   color: #fff;
           }
           .left{
           	   float: left;
           	   width: 20%;
           	   height: 200px;
           	   background: red;
           }
           .right{
           	   float: right;
           	   width: 30%;
           	   height: 80px;
           	   background: green;
           }
           /*清除浮动代码*/
           .clearfloat:after{
           	   display: block;
           	   clear: both;
           	   content: "";
           	   visibility: hidden;
           	   height: 0;
           }
           .clearfloat{
           	   zoom: 1;
           }
        </style>
    </head>
    <body>
       <div class="div1 clearfloat">
       	   <div class="left">Left</div>
       	   <div class="right">Right</div>
       </div>
       <div class="div2">div2</div>
    </body>
    </html>
父级div定义，overflow:hidden
  • 原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度；
  • 优点：简单、代码少、浏览器支持好；
  • 缺点：不能喝position配合使用，因为超出的尺寸会被隐藏；
  • 实现代码：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    <!DOCTYPE HTML>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>父级div定义 overflow:hidden</title>
        <style type="text/css">
           .div1{
           	   background-color: #762564;
           	   border:1px solid #ccc;
           	   color: #fff;
           	   /*清除浮动代码*/
           	   width: 100%;
           	   overflow: hidden;
           }
           .div2{
           	   background-color: #656532;
           	   border:1px solid #ddd;
           	   height: 100px;
           	   margin-top: 10px;
           	   color: #fff;
           }
           .left{
           	   float: left;
           	   width: 20%;
           	   height: 200px;
           	   background: red;
           }
           .right{
           	   float: right;
           	   width: 30%;
           	   height: 80px;
           	   background: green;
           }
        </style>
    </head>
    <body>
       <div class="div1 clearfloat">
       	   <div class="left">Left</div>
       	   <div class="right">Right</div>
       </div>
       <div class="div2">div2</div>
    </body>
    </html>
父级div定义 overflow:auto
  • 原理：必须定义width或zoom:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度；
  • 优点：简单、代码少、浏览器支持好；
  • 缺点：内部宽高超过父级div时，会出现滚动条；
  • 实现代码：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    <!DOCTYPE HTML>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>父级div定义 overflow:auto</title>
        <style type="text/css">
           .div1{
           	   background-color: #762564;
           	   border:1px solid #ccc;
           	   color: #fff;
           	   /*清除浮动代码*/
           	   width: 98%;
           	   overflow: auto;
           }
           .div2{
           	   background-color: #656532;
           	   border:1px solid #ddd;
           	   height: 100px;
           	   margin-top: 10px;
           	   color: #fff;
           }
           .left{
           	   float: left;
           	   width: 20%;
           	   height: 200px;
           	   background: red;
           }
           .right{
           	   float: right;
           	   width: 30%;
           	   height: 80px;
           	   background: green;
           }
        </style>
    </head>
    <body>
       <div class="div1 clearfloat">
       	   <div class="left">Left</div>
       	   <div class="right">Right</div>
       </div>
       <div class="div2">div2</div>
    </body>
    </html>
您的支持将鼓励我继续创作！