DaZeng：清除浮动

10.21-10.25之 WEB任务（一）

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的概念触发及应用