zoukankan      html  css  js  c++  java
  • 清除浮动总结

    浮动

    • 不占文档流

    • 浮动只会影响后面的文档流

    • 给父元素不添加高度加浮动会导致父元素没有高度,想要父元素不加高度子元素可以使用浮动,且不影响下面的文档流,就需要清除浮动

      • 额外标签法清除浮动

        <style>
            li{
                float:left;
            }
            .clear {
                clear:both;
            }
        </style>
        <body>
            <div>
                <ul>
                    <li>1111</li>
                    <li>22222</li>
                    <div class='clear'></div>
                </ul>
            </div>
        </body>
        
      • 给父级元素添加 overflow (子不教父之过) overflow:hidden

        • 缺点:无法显示出溢出的部分
        • 优点:代码简洁
      • :after 伪元素 也是给父元素添加的 *

        .clearfix:after{
        	content:'';
        	display:block;
        	clear:both;
        	visiblity:hidden;
        }
        
        • 优点:结构简单,代码简洁
        • 缺点:照顾低版本浏览器
      • 父级双伪元素 也是给父元素添加的 *

        .clearfix:before,.clearfix:after{
        content:'',
        display:table;
        }
        .clearfix{
        clear:both;
        }
        .alearfix{
        *zoom:1
        }
        
        • 优点:结构简单,代码简洁
        • 缺点:照顾低版本浏览器
  • 相关阅读:
    Python基础
    熟悉常见的Linux操作
    大数据概述
    实验报告(3)-语法分析
    LL(1)文法
    简化版C语言文法
    实验报告(1)-词法分析
    中文词频统计
    综合练习:英文词频统计
    字符串练习
  • 原文地址:https://www.cnblogs.com/wszzj/p/14917203.html
Copyright © 2011-2022 走看看