清除浮动

作者: Dxes | 来源:发表于2019-12-06 21:01 被阅读0次

11.22 前端学习
前端06
06 前端学习
清除浮动
技术知识点整理
H5前端开发学习笔记——0x15清除浮动
css清除浮动
CSS清除浮动三种方式
布局浮动的问题
清除浮动

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        
        
    </head>
    <body>
        <!--
            1.清除浮动指的是清除因为浮动而产生的高度塌陷的问题。
            
            2.高度塌陷: 如果父标签没有设置高度，并且没浮动，子标签浮动的时候就会出现高度塌陷的问题
            
            3.清除浮动的三种方法:
            1)空盒子法: 在高度会塌陷的标签的最添加一个空的div，并且设置这个空的div的clear属性为both
            2)方法二: 设置高度会塌陷的标签的overflow属性为hidden
        -->
        <style type="text/css">
            /*2)方法二*/
            /*.height{
                overflow: hidden;
            }*/
            
            /*3)万能清除法*/
            .height:after{
                display: block;
                clear: both;
                content: "";
                visibility: hidden;
                height: 0;
            }
            .height{
                zoom: 1;
            }
            
        </style>
        
        <div style="background-color: red; height: 200px;"></div>
        
        <div style="background-color: green;" class="height">
            <div id="" style="background-color: yellow; height: 200px; width: 30%; float: left;">
                
            </div>
            <div id="" style="background-color: deeppink; height: 100px; width: 20%; float: right;">
                
            </div>
            <!--1)空盒子法-->
            <!--<div id="" style="clear: both;"></div>-->
        </div>
        <div style="background-color: blue; height: 150px;"></div>
        
        
        
        
    </body>
</html>