• 清除浮动总结


    • HTML结构
    	<div class="parent">
            <div class="child1"></div>
            <div class="child2"></div>
        </div>
    
    • 给父元素设置高
    .parent{
                 100%;
                background-color: yellowgreen;
                /*设置padding可以很容易看到父元素高度塌陷*/
                padding: 20px;
                /*给父元素设置高度*/
                height: 200px;
            }
    .child1, .child2{
                float: left;
                 200px;
                height: 200px;
            } 
    .child1{
                background-color: red;
            }
    .child2{
                background-color: yellow;
            }   
    
    • 给父元素设置overflow
    .parent{
                 100%;
                background-color: yellowgreen;
                /*设置padding可以很容易看到父元素高度塌陷*/
                padding: 20px;
                /*给父元素设置overflow*/
                overflow: hidden;
            }
    
    • 给父元素设置float
    .parent{
                 100%;
                background-color: yellowgreen;
                /*设置padding可以很容易看到父元素高度塌陷*/
                padding: 20px;
                /*父元素设置浮动*/
                float: left;
            }
    
    • 在浮动元素结尾处加一个空标签class="clearfloat",并设置clear:both
    .parent{
                 100%;
                background-color: yellowgreen;
                /*设置padding可以很容易看到父元素高度塌陷*/
                padding: 20px;
            }
    .clearfloat{
                clear: both;
                /*ie*/
                zoom: 1;
            }
    
    • 给父元素添加class="clearfix",并在css中加入以下样式
    .clearfix:after{
                display: table;
                content: '';
                clear: both;
            }
    
  • 相关阅读:
    POJ 3667 & HDU 3308 & HDU 3397 线段树的区间合并
    HDU 5992 kd-tree
    BZOJ 4154 kd-tree dfs序 + 二维空间的区间(矩阵)更新单点查找
    BZOJ 4066 kd-tree 矩形询问求和
    BZOJ 1941 kd-tree
    BZOJ 2648 kd-tree模板
    HDU 5925 离散化
    php trait
    php命名空间
    js
  • 原文地址:https://www.cnblogs.com/wuyu1787/p/6836984.html
Copyright © 2020-2023  润新知