浮动 7、清除CSS-日常随笔记
本章笔记主要包括：浮动问题、清除浮动、margin塌陷、盒子居中
重要系数： ☆☆☆☆☆
关于浮动基础知识可以点击这里查看1、浮动问题
通过浮动可以脱离标准文档流，可以制作出比较好看的网页布局。但是使用浮动会存在一个很大的问题，如下代码：
*{ margin: 0px; padding: 0px;}h1{ float: left; width: 200px; background-color: red; margin-left: 10px;}<!-- HTML --><div> <h1>测试浮动问题</h1> <h1>测试浮动问题</h1></div><div> <h1>测试浮动问题</h1> <h1>测试浮动问题</h1></div>
理论上，因为div的存在，h1左浮动后会分成两行戴佳乐 。但事实上，四个h1在一行显示相见无几时，div这个块级元素没了效果。(自行赋值代码运行，查看效果)
造成上述问题的原因是：div我们没有设置高度，默认为0，无法为子元素提供有效的容器，称之为“高度塌陷”王音棋微博。2、清除浮动
由于元素浮动会让布局产生混乱，所以需要清除浮动带来的影响钱景峰 ，换句话说，使用了浮动，就要关闭浮动。2.1、方式一：
为父级div设置“合适”的高度
*{ margin: 0px; padding: 0px;}h1{ float: left; width: 200px; background-color: red; margin-left: 10px;}div{ height: 100px;}<!-- HTML --><div> <h1>测试浮动问题</h1> <h1>测试浮动问题</h1></div><div> <h1>测试浮动问题</h1> <h1>测试浮动问题</h1></div>
当为父级元素设置合适高度的时候，这个问题就被解决了农女阿喜 。需要注意的是，设置的是“合适”的高度，如果设置的高度不及子元素高度，那么依然会有问题。这种方式虽然可以解决高度塌陷，但是并不是很好地解决方案何佳仪。2.2、方式二：
使用属性clear属性清除浮动
*{ margin: 0px; padding: 0px;}h1{ float: left; width: 200px; background-color: red; margin-left: 10px;}.clear{ clear: both; margin-top: 100px;}<!-- HTML --><div> <h1>测试浮动问题</h1> <h1>测试浮动问题</h1></div><div class="clear"> <h1>测试浮动问题</h1> <h1>测试浮动问题</h1></div>
需要注意的是，clear属性应该加在后一个div上面。表示清除前面div浮动对自身的影响。但是这种设置方式所导致的一个问题是：margin属性失效。2.3、方式三：
在存在浮动的父级div之间使用新的div隔开
*{ margin: 0px; padding: 0px;}h1{ float: left; width: 200px; background-color: red; margin-left: 10px;}.div1{ background-color: yellow;}.div2{ background-color: blue;}.clear{ clear: both; margin-top: 100px; height: 5px;}<!-- HTML --><div class="div1"> <h1>测试浮动问题</h1> <h1>测试浮动问题</h1></div><div class="clear"></div><div class="div2"> <h1>测试浮动问题</h1> <h1>测试浮动问题</h1></div>
上述方式：clear的div的margin属性也会失效，但是可以设置高度撑开两者的距离。左央但是两个父级div依旧没有高度，所以设置的背景颜色是无效的。
另一种方式：
<!-- HTML --><div class="div1"> <h1>测试浮动问题</h1> <h1>测试浮动问题</h1> <div class="clear"></div></div><!-- <div class="clear"></div> --><div class="div2"> <h1>测试浮动问题</h1> <h1>测试浮动问题</h1></div>
这种方式不仅清除浮动，而且还会使得div1有高度且有背景颜色，高度等于h1自身高度 + clear那个div设置的高度任宏恩哭坟 。2.4、方式四：
使用属性overflow:hidden（本意是隐藏溢出部分）
*{ margin: 0px; padding: 0px;}h1{ float: left; width: 200px; background-color: red; margin-left: 10px;}.div1{ overflow: hidden; background-color: yellow; margin-bottom: 10px;}<!-- HTML --><div class="div1"> <h1>测试浮动问题</h1> <h1>测试浮动问题</h1></div><div class="div2"> <h1>测试浮动问题</h1> <h1>测试浮动问题</h1></div>
上述方式清除浮动都市邪医 ，且margin可以使用，且是div1产生高度。高度与最高子元素高度相同。3、margin塌陷
关于margin的基本知识可以点击这里查看
margin塌陷主要表现为：两个盒子上下相邻杨健平，竖直方向的margin，以margin大的为主，margin小的会塌陷在大margin。【左右相邻的盒子margin不会塌陷，距离为两个盒子margin之和。】
margin塌陷只会存在标准文档流中小爱进城 ，脱离标准文档流则不存在这种显现像，关于标准文档流知识可以点击这里查看
塌陷示例：
<style type="text/css"> *{ margin: 0; padding: 0; } div{ height: 30px; background-color: red; } span{ height: 30px; background-color: blue; } .div1{ margin-bottom: 100px; } .div2{ margin-top: 50px; } .span1{ margin-right: 50px; } .span2{ margin-left: 100px; } h1{ clear: both; }.div3{ float: left; width: 800px; margin-bottom: 100px; } .div4{ float: left; width: 800px; margin-top: 50px; } .span3{ float: left; margin-right: 50px; } .span4{ float: left; margin-left: 100px; }</style><!-- HTML --><!-- 标准流 --><div class="div1">竖直方向测试塌陷 上盒子</div><div class="div2">竖直方向测试塌陷 下盒子</div><span class="span1">水平方向测试 左盒子</span><span class="span2">水平方向测试 右盒子</span><!怀铁一中贴吧 -- 清除浮动 --><h1 class="clear"></h1><!-- 脱离标准流 --><div class="div3">竖直方向测试塌陷 上盒子</div><div class="div4">竖直方向测试塌陷 下盒子</div><h1 class="clear"></h1><span class="span3">水平方向测试 左盒子</span><span class="span4">水平方向测试 右盒子</span>
上述代码不再赘述，相关注意点已经写在注解中黄颊山雀。4、盒子居中
*{ margin: 0; padding: 0;}.div1{ width: 200px; height: 200px; margin: 0 auto; background-color: red;}.div2{ text-align: center; background-color: blue;}.div3{ width: 100px; margin: 0 auto; background-color: yellow;}<!-- HTML --><div class="div1">测试盒子居中1</div><div class="div2"> <div class="div3"> 盒子居中2 </div></div>
==标准文档流中==指定宽度的盒子使用margin：0 auto；使得被作用的盒子居中显示，可以拆分成：
margin-left:auto;margin-right:auto;
margin-left：auto；表示左边宽度尽可能大。margin-right:auto;表示右边宽度尽可能大，同时作用就是居中喋血四平。
注：
margin: 0 auto;使用的首要条件是：在标准文档流中、且盒子指定宽度
margin: 0 auto;表示居中的是盒子孙储琳，并非内部文本，文本居中使用：text-align: center总结
以后的代码越来越多，源文件上传至群里，大家可以公众号内回复“加群”，进入qq群内获取
浮动会产生父级元素“高度塌陷”的问题。
解决“高度塌陷”方式包括：父级元素加合适高度、使用属性clear清除、使用属性overflow清除
clear的值有both、left、right甲午甲午，分别对应的是：清除左右浮动、清除左浮动、清除右浮动
只有在标准文档流中会产生：margin塌陷和使用margin:0 auto属性长按关注