当前位置 博文首页 > 大曾blog：DaZeng：清除浮动
1、一周复习hcj,HTML一般用的也就那些东西，了解一下行内元素、块级元素、行内块元素。
2、清除浮动（好像是五种还是六种方式）
3、BFC（概念、触发、作用、应用）
4、居中问题（水平垂直居中方法，大概有十来种，你自己总结一下）
5、圣杯布局（flex、float、position要会，尤其前两种，gird和table了解就行）
6、轮播图:js原生做弄清楚原理有箭头，实现了写导航点自动播放然后无缝
注:就是不是让你全背下来，但是常用的要会，不能写什么都要翻文档，菜鸟或者w3c都可以 。
上一篇：行内元素，块级元素、行内块级元素
由于浮动元素不再占用原文档的位置，不清除浮动的花就会对后面的元素排版造成影响，即清除浮动主要为了解决父元素因为子级浮动而引起内部高度变为0，引起高度坍塌。
实例分析没有浮动和不清除浮动的效果：
HTML:
<div class="container">
<h1>我是h1，猜猜有几种清除浮动的方式</h1>
<p>代码图像演示并说明优缺点</p>
</div>
CSS:（没有浮动时图一，注释取消实现浮动图二）
<style>
.container{
background-color: pink;
}
h1,p{
/* float: left; */
border: 2px solid black;
width: 100%;
}
</style>
图一与图二上下对比发现，浮动元素h1，p的父级container的粉红色没有啦！是因为他们飘起来爸爸就抱不到他们啦！于是出现解决方案！
师傅官方解释嘿嘿：就是父盒子的高度，如果不设定是为0，如果有内容，是内容撑起高度，浮动时候，子盒子脱离文档流，父盒子没有内容，高度为0，所以看不到背景颜色
解决：
方法一：额外标签法
在包裹浮动元素的父元素中末尾加上<div style="clear:both"></div>其中 .clear:both(left|right)，解释一个left好了，清除左侧浮动影响也可以是不允许左侧有浮动元素。
<div class="container">
<h1>我是h1，猜猜有几种清除浮动的方式</h1>
<p>代码图像演示并说明优缺点</p>
<div style="clear: both;"></div>
</div>
效果图当然和图一是一样的就不添加图片了?
缺点：
增加无意义的标签，违背了结构和表现分离的web标准，后期维护不便。（为此我还去扩展了一下什么是web标准，就当扩充文写吧。）
方法二：overflow：hidden
为此我还去w3c复习了一下overflow的取值，除了hidden还有auto，scroll，但inherit和visible就不行了。auto和scroll有滚动条。
缺点：内容增多造成不自动换行，导致内容被溢出、隐藏。
方法三：float：xxx
这个方法很好理解，解释给父级CSS也加上对应的float，比如这里是float:left。
实现效果还是图一?
缺点：之后页面多了不可能让每一层都这么float啊，影响页面布局。
方法四：父级增加一个CSS为clearfix(最常用)
HTML:
<div class="container clearfix">
<h1>我是h1，猜猜有几种清除浮动的方式</h1>
<p>代码图像演示并说明优缺点</p>
</div>
CSS:
<style>
.container{
background-color: pink;
}
.clearfix:before,
.clearfix:after
{
content: "";
display: table;
}
.clearfix:after{
clear: both;/* 双伪元素清除浮动 */
}
.clearfix{
*zoom: 1;/* 由于IE6/IE7不支持after用zoom：1触发hasLayout */
}
h1,p{
float: left;
border: 2px solid black;
width: 100%;
}
</style>
或者（不用双伪元素）：
<style>
.container{
background-color: pink;
}
.clearfix:after{
content: ".";/* 内容也可以为空，试了一下为空的时候visibility和height可以注释掉 */
display: block;
clear: both;
visibility: hidden;/* 隐藏了content的 .但仍然占用空间所以写height来控制 */
height: 0;/* 使父级元素和子元素原来不浮动时的包裹高度一致 */
}
.clearfix{
*zoom: 1;/* 由于IE6/IE7不支持after用zoom：1触发hasLayout */
}
h1,p{
float: left;
border: 2px solid black;
width: 100%;
}
</style>
四种方法实现效果就都如此啦嘿嘿~
师傅指点后再扩充一种超简单的方法
方法五：这个很容易想到，如果能确定所需高度直接给父盒子设定高度
下一篇：BFC的概念触发及应用
cs