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

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

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

<!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解决高度塌陷

猜你喜欢