zoukankan      html  css  js  c++  java
  • 浮动和包含框的关系,伪元素after解决高度塌陷

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

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

    <!DOCTYPE html>
     <html>
     <head>
        <style type="text/css">
        * {
                margin:0;
                padding:0;
        }
            .container {
                110px;
                height:100px;
                border:1px solid blue;
            }
            .block1 {
                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 {
                110px;
                height:100px;
                border:1px solid blue;
            }
            .block1 {
                50px;
                height:50px;
                border:1px solid red;
                float:left;
            }
            .block2 {
                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 {
                100px;
                height:50px;
                border:1px solid red;
                float:left;
            }
            .block2 {
                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 {
                100px;
                height:50px;
                border:1px solid red;
                float:left;
            }
            .block2 {
                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 {
                100px;
                height:50px;
                border:1px solid red;
                float:left;
            }
            .block2 {
                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,此处只为清浮动,设置内容为空即可),否则无效
  • 相关阅读:
    JavaScript操作符instanceof揭秘
    Linux打开txt文件乱码的解决方法
    Working copy locked run svn cleanup not work
    poj 2299 UltraQuickSort 归并排序求解逆序对
    poj 2312 Battle City 优先队列+bfs 或 记忆化广搜
    poj2352 stars 树状数组
    poj 2286 The Rotation Game 迭代加深
    hdu 1800 Flying to the Mars
    poj 3038 Children of the Candy Corn bfs dfs
    hdu 1983 Kaitou Kid The Phantom Thief (2) DFS + BFS
  • 原文地址:https://www.cnblogs.com/cowboybusy/p/9561156.html
Copyright © 2011-2022 走看看