HTML5中块级元素float浮动总结

1.float属性

在CSS中，任何元素都可以浮动，无论是块级元素还是行内元素，设置浮动后可以设置宽高（width,height）。

值	描述
left	元素向左浮动。
right	元素向右浮动。
none	默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit	规定应该从父元素继承 float 属性的值。

HTML5中的块级元素默认要独占一行，无论当前块元素的宽度是多少。

2.简单示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>float用法</title>
    <style>
        #container {
            border: 1px solid rgb(163, 163, 163);
            background-color: #ddd;
            width: 800px;
         }

        #block1 {
            border: 1px solid rgb(163, 163, 163);
            background-color: rgb(233, 142, 142);
            width: 200px;
            height: 150px;
          
        }

        #block2 {
            border: 1px solid rgb(163, 163, 163);
            background-color: rgb(145, 233, 142);
            width: 300px;
            height: 180px;
           
        }

        #block3 {
            border: 1px solid rgb(163, 163, 163);
            background-color: rgb(241, 94, 241);
            width: 260px;
            height: 120px;
          
        }

        
    </style>
</head>

<body>
    <div id="container">
        <div id="block1">block1</div>
        <div id="block2">block2</div>
      
    </div>
    <div id="block3">block3</div>
</body>

</html>

效果图

（1）container块没有设置高度

（2）block1块和block2放置于container块中，block3块置于container块之外。

2.1设置第一个块block1浮动

 #block1
        {
            border:1px solid rgb(163, 163, 163);
            background-color: rgb(233, 142, 142);
            width: 200px;
            height: 150px;
            /* 浮动到左边 */
            float: left;
        }

效果图：

block1块脱离文档流浮动到父容器container的左上角，block2块和block3块默认向上移动到原来block1位置，显示出来的效果就是block1盖住了block2。大概是下图这个意思吧。

2.2设置block1浮动到左边，block2浮动到右边

        #block1 {
            border: 1px solid rgb(163, 163, 163);
            background-color: rgb(233, 142, 142);
             200px;
            height: 150px;
            /* 浮动到左边 */
            float: left;
        }

        #block2 {
            border: 1px solid rgb(163, 163, 163);
            background-color: rgb(145, 233, 142);
             300px;
            height: 180px;
            /* 浮动到右边 */
            float: right;
        }

效果图

block1块和block2块都浮动起来了，两个块的高度都比block3高，所以block3顶到文档的最上面，被block1块和block2块盖住。

2.3清除浮动(clear)

clear 属性规定元素的哪一侧不允许其他浮动元素。

值	描述
left	在左侧不允许浮动元素。
right	在右侧不允许浮动元素。
both	在左右两侧均不允许浮动元素。
none	默认值。允许浮动元素出现在两侧。
inherit	规定应该从父元素继承 clear 属性的值。

clear清除浮动的原理（转自：https://blog.csdn.net/weixin_41796631/article/details/89425006）

（1）设置了 clear 的元素只能通过调整自身来使自己不要和浮动元素排列在一起。

（2）比如说，如果一个元素同时设置了 float:left 和 clear:left，希望左边不要有浮动元素，那么这个元素就要调整自己，排到下一行去。因为设置了 float: left，这个元素会往左边靠拢，所以这个元素会跑到下一行，同时往左浮动。

（3）如果设置了clear: right，也无法清除右边的元素。因为元素只能调整自身，不能移动别的元素。所以右边即使有浮动元素，也无法清除。

w3.org官方的解释是：「元素盒子的边不能和前面的浮动元素相邻」。我理解这句话其实就是调到前面元素的下一行，让左右两边不与前面的元素相邻。

2.4清除浮动的4种方法

（1）设置block3块的clear属性

  #block3 {
            border: 1px solid rgb(163, 163, 163);
            background-color: rgb(241, 94, 241);
             260px;
            height: 120px;
            /* 清除左边浮动 */
            clear:left;
        }

效果图：

  #block3 {
            border: 1px solid rgb(163, 163, 163);
            background-color: rgb(241, 94, 241);
             260px;
            height: 120px;
            /* 清除右边浮动 */
            clear:right;
        }

效果图：

（2）在block2块后面添加一个空div，这个空 div 的样式添加 clear：both。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>float用法</title>
    <style>
        #container {
            border: 1px solid rgb(163, 163, 163);
            background-color: #ddd;
            width: 800px;
         }

        #block1 {
            border: 1px solid rgb(163, 163, 163);
            background-color: rgb(233, 142, 142);
            width: 200px;
            height: 150px;
            /* 浮动到左边 */
            float: left;
        }

        #block2 {
            border: 1px solid rgb(163, 163, 163);
            background-color: rgb(145, 233, 142);
            width: 300px;
            height: 180px;
            /* 浮动到右边 */
            float: right;
        }

        #block3 {
            border: 1px solid rgb(163, 163, 163);
            background-color: rgb(241, 94, 241);
            width: 260px;
            height: 120px;
          
        }
        
        .clearfix{
            clear: both;
        }
        
    </style>
</head>

<body>
    <div id="container">
        <div id="block1">block1</div>
        <div id="block2">block2</div>
        <div class="clearfix"></div>
    </div>
    
    <div id="block3">block3</div>
</body>

</html>

效果图：

样式名为clearfix的块写在了container块里面，当清除浮动时，父元素container的高度被撑起来了，其兄弟元素block3的渲染也不再受到浮动的影响。因为此时clearfix块还在文档流内，所以父元素只能自动增加高度，其背景颜色就显示出来了。

如果将clearfix的块写在了container块外面，则父元素container的高度不能被撑起来，如下图所示：

（3）为父元素添加overflow属性

overflow属性

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

 #container {
            border: 1px solid rgb(163, 163, 163);
            background-color: #ddd;
             800px;
            /* 父元素加上overflow属性 */
            overflow: auto;
         }

效果如下图，此时已经默认清除了浮动。

（以下内容转自：https://blog.csdn.net/h_qingyi/article/details/81269667）

（4）使用 after 伪元素清除浮动（推荐使用）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>float用法</title>
    <style>
        #container {
            border: 1px solid rgb(163, 163, 163);
            background-color: #ddd;
            width: 800px;
         }

        #block1 {
            border: 1px solid rgb(163, 163, 163);
            background-color: rgb(233, 142, 142);
            width: 200px;
            height: 150px;
            /* 浮动到左边 */
            float: left;
        }

        #block2 {
            border: 1px solid rgb(163, 163, 163);
            background-color: rgb(145, 233, 142);
            width: 300px;
            height: 180px;
            /* 浮动到右边 */
            float: right;
        }

        #block3 {
            border: 1px solid rgb(163, 163, 163);
            background-color: rgb(241, 94, 241);
            width: 260px;
            height: 120px;
          
        }
        
        .clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }
       .clearfix{
        *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
       }

        
    </style>
</head>

<body>
    <div id="container" class="clearfix">
        <div id="block1">block1</div>
        <div id="block2">block2</div>
    </div>

    <div id="block3">block3</div>
</body>

</html>

View Code

起作用的代码如下：

 .clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }
       .clearfix{
        *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
       }

效果图：

（5）使用before和after双伪元素清除浮动（推荐使用）

 .clearfix:after,
        .clearfix:before {
            content: "";
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }

效果与上面相同。

（6）给浮动元素父级设置高度

（7）设置父元素同时浮动

（8）父元素设置成inline-block

（9）br 标签清除浮动

参考文章：

https://www.w3school.com.cn/cssref/pr_class_float.asp

https://blog.csdn.net/nanjinzhu/article/details/82716522

https://blog.csdn.net/weixin_34062469/article/details/91721757

https://blog.csdn.net/linysuccess/article/details/53432568

https://blog.csdn.net/qq_42039588/article/details/100982293

https://blog.csdn.net/sunny1996/article/details/68959176

https://blog.csdn.net/weixin_41796631/article/details/89425006

https://blog.csdn.net/weixin_43990215/article/details/95166061?utm_medium=distribute.pc_relevant.none-task-blog-title-1&spm=1001.2101.3001.4242

https://blog.csdn.net/weixin_34072857/article/details/91372246?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.channel_param

https://www.cnblogs.com/nxl0908/p/7245460.html

转载文章链接已标明，如有侵权请告知。文章仅作为知识记忆所用，如有错误，敬请指正。