清除浮动（塌陷问题最终解决方案） 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
        
             .box1{
                width: 100px;
                height: 100px;
                background-color: #BBFFAA;
                /*设置浮动*/
                float: left;
            }
            .box2{
                width: 200px;
                height: 200px;
                background-color: yellowgreen;
                /*
                    由于受到box1浮动影响，box2整体向上移动100px
                    有时希望清除掉其他元素浮动对当前元素产生影响
                    可以使用clear达到效果
                    clear可以用来清除其他浮动元素对当前元素的影响
                        可选值：
                            none 默认值，不清除浮动
                            left 清除左侧浮动元素对当前元素的影响
                            right 清除右侧浮动元素对当前元素的影响
                            both 清除两侧浮动元素对当前元素影响
                                    清除对他影响最大元素的浮动
                */
               
               /*
                  清除box1浮动对box2的影响
                  清除浮动以后元素会回到其他元素浮动前位置
               */
              float: right;
              
            }
            .box3{
                width: 300px;
                height: 300px;
                background-color: skyblue;
                clear: both;
            } 
        </style>
    </head>
    <body>
        <div class="box1"></div>
        
        <div class="box2"></div>
        
        <div class="box3"></div>
    </body>
</html>

清除浮动使用clear来清除其他浮动元素对当前元素的影响

　　可选值：　　none 默认值，不清楚浮动

　　　　　　　　left 清除左侧浮动

　　　　　　　　right 清除右侧浮动

　　　　　　　　both 清除两侧浮动（就是清除对该元素影响最大元素的浮动）

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .box1{
                border: 1px solid red;
            }
            .box2{
                width: 100px;
                height: 100px;
                background-color: #BBFFAA;
                float: left;
            }
            /*
                解决高度塌陷方案二
                    可以直接在高度塌陷父元素的最后添加一个空白div
                    由于这个div没有浮动，所以是可以撑开父元素的高度
                    再对其清除浮动，可以通过这个空白div撑开父元素的高度
                    基本没有副作用
                    
                    使用该方式虽可以解决问题，但会在页面中添加多余结构
            */
            .box3{
                clear: both;
            }
        </style>
    </head>
    <body>
        <div class="box1">
            <div class="box2"></div>
            <div class="box3"></div>
        </div>
        
    </body>
</html>

解决高度塌陷方案二

　　直接咋高度塌陷父元素最后添加一个空白div，由于div没有浮动，可以撑开父元素的高度，再对齐清除浮动

　　使用该方式可以解决问题，但是会在页面中添加多余结构

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .box1{
                border: 1px solid red;
            }
            .box2{
                width: 100px;
                height: 100px;
                background-color: #BBFFAA;
                float: left;
            }
            /*通过after伪类，选中box1的后边*/
            /*
                可以通过after伪类向元素最后添加空白块元素，对齐清除浮动
                和添加一个div原理一样，可以达到相同效果
                不会在页面中添加多余div，几乎没有副作用
            */
            .clearfix::after{
                /*添加内容*/
                content: ;
                /*转换块元素*/
                display: block;
                /*清除浮动*/
                clear: both;
                
            }
            /*
                在IE6中不支持after伪类
                    所以在IE6中还需要使用hasLayout来处理
            */
           .clearfix{
               zoom: 1;
           }
            
        </style>
    </head>
    <body>
        <div class="box1 clearfix">
            <div class="box2"></div>            
        </div>
        
    </body>
</html>

 

posted @ 2021-07-05 15:45  2237774566  阅读(155)  评论(0)    收藏  举报