CSS:盒子模型和清除float浮动的三种常用方法

分手后的思念是犯贱 2022-03-11 11:36 205阅读 0赞

**目录**

一：浮动产生原因：

二：浮动产生副作用:

三：浮动解决方法：

--------------------

### QUESTION:CSS盒子模型清除浮动? ###

### ANSWER: ###

# 一：浮动产生原因： #

**一般浮动是什么情况呢？一般是一个盒子里使用了[CSS float][]浮动属性，导致父级对象盒子不能被撑开，这样[CSS][] [float浮动][CSS float]就产生了。**

**浮动产生样式截图:**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmcxMzU2Mzc1ODEyOA_size_16_color_FFFFFF_t_70][]

**本来两个黑色对象盒子是在红色盒子内，因为对两个黑色盒子使用了[float][CSS float]浮动，所以两个黑色盒子产生了[浮动][CSS float]，导致红色盒子不能撑开，这样浮动就产生了。**

**简单地说，浮动是因为使用了[float:left][CSS float]或[float:right][CSS float]或两者都是有了而产生的浮动。**

# 二：浮动产生副作用: #

**1、背景不能显示  
由于浮动产生，如果对父级设置了（[CSS background背景][CSS background]）[CSS背景颜色][CSS 1]或[CSS背景图片][CSS 1]，而父级不能被撑开，所以导致[CSS背景][CSS background]不能显示。**

**2、边框不能撑开  
如上图中，如果父级设置了[CSS边框][CSS 2]属性（[css border][CSS 2]），由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。**

**3、margin padding设置值不能正确显示  
由于浮动导致[父级子级][Link 1]之间设置了css padding、[css margin][]属性的值不能正确表达。特别是上下边的padding和[margin][css margin]不能正确显示。**

# **三：浮动解决方法：** #

**这里[DIVCSS5][CSS]为了统一讲解浮动解决方法，假设了有三个盒子对象，一个父级里包含了两个子级，子级一个使用了float:left属性，另外一个子级使用float:right属性。同时设置[div css ][CSS][border][CSS 2]，父级css边框颜色为红色，两个子级边框颜色为蓝色；[父级][Link 1]CSS背景样式为黄色，两个子级背景为白色；父级[css width][]宽度为400px，两个子级[css宽度][css width]均为180px，两个[子级][Link 1]再设置相同[高度][Link 2]100px，父级[css height][Link 2]高度暂不设置（通常为实际[css布局][CSS]时候这样父级都不设置高度，而高度是随内容增加自适应高度）。**

**父级[CSS命名][CSS 3]为“.divcss5”对应[html标签][html]使用“<[div][CSS] class="divcss5">”  
两个子级CSS命名分别为“.divcss5-left”“.divcss5-right”**

**根据以上描述DIVCSS5给出对应[CSS代码][CSS 4]和[HTML代码][HTML]片段：**

<!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    	<style type="text/css">
    	.divcss5{ 
    		width:400px;
    	    border:1px solid #F00;
    	    background:#FF0;
    	} 
        .divcss5-left,.divcss5-right{ 
        	width:180px; 
        	height:100px; 
    	    border:1px solid #00F; 
    	    background:#FFF;
    	} 
        .divcss5-left{ 
        	float:left;
        } 
        .divcss5-right{ 
        	float:right;
        } 
    	</style>
    </head>
    <body>
        <div class="divcss5"> 
            <div class="divcss5-left">left浮动</div> 
            <div class="divcss5-right">right浮动</div> 
        </div> 
    </body>
    </html>

**1、对父级设置适合CSS高度  
对父级设置适合高度样式清除浮动，这里对“.divcss5”设置一定高度即可，一般设置高度需要能确定内容高度才能设置。这里我们知道内容高度是100PX+上下边框为2px，这样具体父级高度为102px**

.divcss5{ 
    		width:400px;
    		height: 102px;
    	    border:1px solid #F00;
    	    background:#FF0;
    	} 
        .divcss5-left,.divcss5-right{ 
        	width:180px; 
        	height:100px; 
    	    border:1px solid #00F; 
    	    background:#FFF;
    	} 
        .divcss5-left{ 
        	float:left;
        } 
        .divcss5-right{ 
        	float:right;
        }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmcxMzU2Mzc1ODEyOA_size_16_color_FFFFFF_t_70 1][]

**2、[clear:both][clear_both]清除浮动  
为了统一样式，我们新建一个样式选择器CSS命名为“.clear”，并且对应选择器样式为“clear:both”，然后我们在父级“</div>”结束前加此div引入“class="[clear][clear_both]"”样式。这样即可清除浮动。**

<!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    	<style type="text/css">
    	.divcss5{ 
    		width:400px;
    	    border:1px solid #F00;
    	    background:#FF0;
    	} 
        .divcss5-left,.divcss5-right{ 
        	width:180px; 
        	height:100px; 
    	    border:1px solid #00F; 
    	    background:#FFF;
    	} 
        .divcss5-left{ 
        	float:left;
        } 
        .divcss5-right{ 
        	float:right;
        } 
        .clear{
        	clear:both;
        }
    	</style>
    </head>
    <body>
        <div class="divcss5"> 
            <div class="divcss5-left">left浮动</div> 
            <div class="divcss5-right">right浮动</div> 
            <div class="clear"></div>
        </div> 
    </body>
    </html>

**![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmcxMzU2Mzc1ODEyOA_size_16_color_FFFFFF_t_70 2][]**

**3、父级div定义 overflow:hidden  
对父级CSS选择器加overflow:hidden样式，可以清除父级内使用float产生浮动。优点是可以很少CSS代码即可解决浮动产生。**

**overflow:hidden解决CSS代码：**

.divcss5{ 
    		width:400px;
    	    border:1px solid #F00;
    	    background:#FF0;
    	    overflow: hidden;
    	} 
        .divcss5-left,.divcss5-right{ 
        	width:180px; 
        	height:100px; 
    	    border:1px solid #00F; 
    	    background:#FFF;
    	} 
        .divcss5-left{ 
        	float:left;
        } 
        .divcss5-right{ 
        	float:right;
        }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmcxMzU2Mzc1ODEyOA_size_16_color_FFFFFF_t_70 3][]

**为什么加入overflow:hidden即可清除浮动呢？那是因为overflow:hidden属性相当于是让父级紧贴内容，这样即可紧贴其对象内内容（包括使用float的div盒子），从而实现了清除浮动。Css overflow:hidden清除浮动方法[DIVCSS5][CSS]推荐使用。**

**以上三点即是兼容各大浏览器清除浮动的方法，其它有的浏览器不兼容有的不兼容的方法就没必要介绍了，大家记住以上三点解决float浮动清除浮动方法。但这里推荐第三点和第二点解决清除浮动方法。**

[CSS float]: http://www.divcss5.com/rumen/r93.shtml
[CSS]: http://www.divcss5.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmcxMzU2Mzc1ODEyOA_size_16_color_FFFFFF_t_70]: /images/20220311/7932ac4089e24f76995e5b3d27e1392e.png
[CSS background]: http://www.divcss5.com/rumen/r125.shtml
[CSS 1]: http://www.divcss5.com/jiqiao/j369.shtml
[CSS 2]: http://www.divcss5.com/rumen/r120.shtml
[Link 1]: http://www.divcss5.com/rumen/r239.shtml
[css margin]: http://www.divcss5.com/rumen/r128.shtml
[css width]: http://www.divcss5.com/rumen/r119.shtml
[Link 2]: http://www.divcss5.com/rumen/r123.shtml
[CSS 3]: http://www.divcss5.com/jiqiao/j4.shtml
[html]: http://www.divcss5.com/html/h323.shtml
[CSS 4]: http://www.divcss5.com/rumen/r95.shtml
[HTML]: http://www.divcss5.com/html/h393.shtml
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmcxMzU2Mzc1ODEyOA_size_16_color_FFFFFF_t_70 1]: /images/20220311/f0c8743dede44a72bf1907442b4b4c27.png
[clear_both]: http://www.divcss5.com/rumen/r424.shtml
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmcxMzU2Mzc1ODEyOA_size_16_color_FFFFFF_t_70 2]: /images/20220311/7ab0afbee2fc4213a909b8e452afd85a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmcxMzU2Mzc1ODEyOA_size_16_color_FFFFFF_t_70 3]: /images/20220311/9651b9e8e295457b83539c1ed8f5f561.png