浮动和包含框的关系，伪元素after解决高度塌陷

最新推荐文章于 2022-02-25 13:09:13 发布

转载最新推荐文章于 2022-02-25 13:09:13 发布 · 124 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/cowboybusy/p/9561156.html

博客介绍了浮动元素的特性，如会尽量向左或向右移动，宽高不受包含框限制，宽高不设置时由内容决定等。还指出包含块内全是浮动元素会出现高度塌陷问题，并给出使用clear清除浮动和伪元素解决高度塌陷的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

浮动会使元素尽量向左或向右移动，直到碰到包含框或另外一个浮动元素的盒子模型的边缘

包含框并不会改变里面浮动元素的宽高，浮动元素宽高不会限制在包含块以内

<!DOCTYPE html>
 <html>
 <head>
    <style type="text/css">
    * {
            margin:0;
            padding:0;
    }
        .container {
            width:110px;
            height:100px;
            border:1px solid blue;
        }
        .block1 {
            width:500px;
            height:50px;
            border:1px solid red;
            float:right;
        }
       
    </style>
 </head>
 <body>
     <div class="container">
         <div class="block1"><span>块1</span></div>
    
     </div>
 </body>
 </html>

上例中，block1会保持500px的宽度，但container并不会移动位置让block1显示完全，container位置不会变，block1超出container部分会绘制到浏览器左侧以外看不到

把float改为left，就可以清晰看到block1超出container边框

但是，浮动元素会尽量使自己绘制在包含框内

以下block2会另起一行，而不是接着block1，因为另起一行会使block2超出包含框少一点

<!DOCTYPE html>
 <html>
 <head>
    <style type="text/css">
    * {
            margin:0;
            padding:0;
    }
        .container {
            width:110px;
            height:100px;
            border:1px solid blue;
        }
        .block1 {
            width:50px;
            height:50px;
            border:1px solid red;
            float:left;
        }
        .block2 {
            width:100px;
            height:50px;
            border:1px solid red;
            float:left;
        }
       
       
    </style>
 </head>
 <body>
     <div class="container">
         <div class="block1"><span>块1</span></div>
         <div class="block2"><span>块2</span></div>
    
     </div>
 </body>
 </html>

块级浮动元素的宽高如果不设置，他们的宽高就由内容决定（类似内联元素），这个跟普通块级元素不一样（普通块级元素宽会充满父元素，高由内容决定）

包含块的高度如果不设置，里面全部是浮动元素的话，因为浮动元素时脱离文档流的，就会出现高度为0的情况，即高度塌陷

比如：

<!DOCTYPE html>
 <html>
 <head>
    <style type="text/css">
    * {
            margin:0;
            padding:0;
    }
        .container {
            border:1px solid blue;
        }
        .block1 {
            width:100px;
            height:50px;
            border:1px solid red;
            float:left;
        }
        .block2 {
            width:100px;
            height:50px;
            border:1px solid red;
            float:left;
        }
       
       
    </style>
 </head>
 <body>
     <div class="container">
         <div class="block1"><span>块1</span></div>
         <div class="block2"><span>块2</span></div>
    
     </div>
 </body>
 </html>

可以在后面加一个div，使用clear清除浮动，撑起包含块

<!DOCTYPE html>
 <html>
 <head>
    <style type="text/css">
    * {
            margin:0;
            padding:0;
    }
        .container {
            border:1px solid blue;
        }
        .block1 {
            width:100px;
            height:50px;
            border:1px solid red;
            float:left;
        }
        .block2 {
            width:100px;
            height:50px;
            border:1px solid red;
            float:left;
        }
        .block3{
            clear: both;
        }
       
       
    </style>
 </head>
 <body>
     <div class="container">
         <div class="block1"><span>块1</span></div>
         <div class="block2"><span>块2</span></div>
         <div class="block3"><span></span></div>
     </div>
 </body>
 </html>

这种方式比较别扭，一般使用伪元素解决

::after 伪元素在元素最后添加内容（::begin在元素最前面添加内容）

<!DOCTYPE html>
 <html>
 <head>
    <style type="text/css">
    * {
            margin:0;
            padding:0;
    }
        .container {
            border:1px solid blue;
        }
        .block1 {
            width:100px;
            height:50px;
            border:1px solid red;
            float:left;
        }
        .block2 {
            width:100px;
            height:50px;
            border:1px solid red;
            float:left;
        }
 

        .clearfix::after{
            display: block;
            content: "";
            clear: both;
        }
       
       
    </style>
 </head>
 <body>
     <div class="container clearfix">
         <div class="block1"><span>块1</span></div>
         <div class="block2"><span>块2</span></div>
         
     </div>
 </body>
 </html>

after默认为inline元素，inline元素的clear不起作用，所以要改成block元素
同时还要对after设置内容（content，此处只为清浮动，设置内容为空即可），否则无效

转载于:https://www.cnblogs.com/cowboybusy/p/9561156.html