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
        }
        
        • 优点:结构简单,代码简洁
        • 缺点:照顾低版本浏览器
  • 相关阅读:
    window.fonts
    smpt authentification 配置
    如何从思维上应对
    中文字体 英文字体
    Path Breadcrumbs
    drupal commerce app
    做视频或者什么模块开发之类的
    分页符 箭头 难看
    theme wrapper 例子
    background position 稍微深入
  • 原文地址:https://www.cnblogs.com/wszzj/p/14917203.html
Copyright © 2011-2022 走看看