css2.1--笔记6（margin叠加、清除浮动）

我会带着你远行 2022-11-29 12:08 135阅读 0赞

### 解决margin叠加 ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			*{
    				margin: 0;
    				padding: 0;
    			}
    			#up,#down{
    				width:200px;
    				height: 200px;
    				background: #FFC0CB;
    				margin: 50px;
    			}
    			#wrop{
    				width:100px;
    				 height: 100px;
    				 background: #6495ED;
    				 margin:50px;  
    				 overflow: hidden;
    				 /**/
    			}
    			#inner{
    				width:50px;
    				 height: 50px;
    				  background: paleturquoise;
    				   margin:50px;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="up">up</div>
    		
    		
    		
    		
    		<div id="wrop" >
    			<div id="inner"></div>
    		</div>
    		<div id="down">down</div>
    	</body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FCVV9NT2xJX0lUVUk_size_16_color_FFFFFF_t_70][]

### 清除浮动 ###

扩展小知识：

如何将一个文件夹下的html文件，转移到另一个文件夹下。

方法一：ctrl+c复制，ctrl+v粘贴

方法二：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FCVV9NT2xJX0lUVUk_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FCVV9NT2xJX0lUVUk_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FCVV9NT2xJX0lUVUk_size_16_color_FFFFFF_t_70 3][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FCVV9NT2xJX0lUVUk_size_16_color_FFFFFF_t_70 4][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FCVV9NT2xJX0lUVUk_size_16_color_FFFFFF_t_70 5][]

**扩展：**

**haslayout：**

layout是Windows IE的一个私有概念，他决定了元素如何对其内容定位和尺寸计算，以及与其他元素的关系和相互作用。当一个元素“拥有布局”时，它会负责本身及其元素的尺寸和定位。而如果一个元素，“没有拥有布局”，那么他的尺寸和位置由最近的拥有布局的祖先元素控制。

必须说明的是，IE8及以上浏览器使用了全新的显示引擎，已经不在使用haslayout属性

因此haslayout属性只针对IE6\\IE7

**haslayout为什么会出现？**

理论上，每个元素都应该控制自己的尺寸和定位，即每个元素都应该“拥有布局”，当然这只是理想状态。而对于早期的IE显示引擎来说，如果所有元素都“拥有布局”的话，会导致很大的性能问题。因此IE开发团队决定使用布局概念来减少浏览器的性能开销，即只将布局应用于实际需要的那些元素，所以出现了“拥有布局”，和“没有拥有布局”俩种情况

**默认拥有布局元素**

html、body、table、tr、td、img、hr、input、select、textarea、button、iframe、embed、object、applet、marquee

**怎么触发haslayout**

float：left或right

display：inline-block

position：absolute

width：除auto外任何值

height：除auto外任何值

zoom：除normal外任何值

writing-mode：tb-rl

**在IE7中，以下属性也可以触发元素的haslayout**

min-height：任意值

min-width：任意值

max-height：除none外任意值

max-width：除none外任意值

overflow：除visible外任意值，仅用于块级元素

overflow-x：除visible外任意值，仅用于块级元素

overflow-y：除visible外任意值，仅用于块级元素

position：fixed

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		
    		<style type="text/css">
    			*{
    				margin: 0;
    				padding: 0;
    			}
    			#wrap{
    				border: 1px solid;
    				/*想要撑开父级元素的高度，清除浮动，可以直接给父元素添加高度*/
    				/*overflow: hidden;*/
    				/*height: 300px;*/
    				/*position: absolute;*/
    				/*float: left;*/
    			}
    			#inner{
    				float: left;
    				width: 200px;
    				height: 200px;
    				background: pink;
    			}
    			.ss{
    				*zoom: 1;
    			}
    			.ss:after{
    				content: "";
    				display: block;
    				clear: both;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="wrap" class="ss">
    			<div id="inner"></div>
    		
    		
    		</div>
    		
    	</body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FCVV9NT2xJX0lUVUk_size_16_color_FFFFFF_t_70 6][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FCVV9NT2xJX0lUVUk_size_16_color_FFFFFF_t_70]: /images/20221124/558025703c9445cfba021b5fcf5d74a8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FCVV9NT2xJX0lUVUk_size_16_color_FFFFFF_t_70 1]: /images/20221124/a872c98e25cc4aca818dcfdc983dd59c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FCVV9NT2xJX0lUVUk_size_16_color_FFFFFF_t_70 2]: /images/20221124/e12f01f53e61427cbb893feceaf08125.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FCVV9NT2xJX0lUVUk_size_16_color_FFFFFF_t_70 3]: /images/20221124/c33b9168ed914e94b260415885e8d03c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FCVV9NT2xJX0lUVUk_size_16_color_FFFFFF_t_70 4]: /images/20221124/7c1f6d212d78461bb8edd4ef4e015cc8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FCVV9NT2xJX0lUVUk_size_16_color_FFFFFF_t_70 5]: /images/20221124/96cc016778184838a91c54c40eae1588.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FCVV9NT2xJX0lUVUk_size_16_color_FFFFFF_t_70 6]: /images/20221124/950d2f6fe32f4fe8943badc1d7c399df.png