• 清除浮动总结


    • 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;
            }
    
  • 相关阅读:
    Remove Duplicates from Sorted List II [LeetCode]
    Valid Palindrome [LeetCode]
    Merge Sorted Array [LeetCode]
    Binary Tree Postorder Traversal
    Subsets [LeetCode]
    Search for a Range [LeetCode]
    Reorder List [LeetCode]
    GCC 默认用哪个标准
    18 组装类举例
    17 实例方法、静态方法、类方法
  • 原文地址:https://www.cnblogs.com/wuyu1787/p/6836984.html
Copyright © 2020-2023  润新知