您的位置：首页 > Web前端 > JavaScript

JS之清除浮动

2016-08-01 15:29 155 查看

1、给浮动的元素的祖先元素加高度

没有清除浮动：


清除浮动：


div{
height: 50px;
border: 1px solid #000;
}



<body>
<div>          //设置高度
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
<li>设计模式</li>
</ul>
</div>

<div>        //设置高度
<ul>
<li>学习方法</li>
<li>英语水平</li>
<li>面试技巧</li>
</ul>
</div>
</body>

2、clear: both;


.box2{
clear: both;
}

<body>
<div class="box1">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
<li>设计模式</li>
</ul>
</div>

<div class="box2">           //clear：both
<ul>
<li>学习方法</li>
<li>英语水平</li>
<li>面试技巧</li>
</ul>
</div>
</body>
问题：margin失效了，两个div之间没有任何间隙。
3、隔墙法


.cl{
clear: both;
}
.h8{
height: 8px;
_font-size:0;
}

<body>
<div class="box1">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
<li>设计模式</li>
</ul>
</div>

<div class="cl h8"></div>         //隔墙法，第一个div没有高度

<div class="box2">
<ul>
<li>学习方法</li>
<li>英语水平</li>
<li>面试技巧</li>
</ul>
</div>
</body>

4、内墙法


<body>
<div class="box1">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
<li>设计模式</li>
</ul>

<div class="cl h16"></div>   //内墙法
</div>

<div class="box2">
<ul>
<li>学习方法</li>
<li>英语水平</li>
<li>面试技巧</li>
</ul>
</div>
</body>
div被撑出高度了；
5、overflow: hidden;


.box1{
overflow: hidden;
_zoom:1;
margin-bottom: 10px;
}

<body>
<div class="box1">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
<li>设计模式</li>
</ul>
</div>

<div class="box2">
<ul>
<li>学习方法</li>
<li>英语水平</li>
<li>面试技巧</li>
</ul>
</div>
</body>
用途：


<div>
<p class="p1"></p>
<p class="p2"></p>
<p class="p3"></p>
</div>

div{
width: 400px;
overflow: hidden;
border: 10px solid black;
}

一个父亲不能被自己浮动的儿子，撑出高度。但是，只要给父亲加上overflow:hidden; 那么，父亲就能被儿子撑出高了。这是一个偏方。
6、推荐使用
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;    /*IE6 7*/
}

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                HTML
                                                javascript
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航