css布局浮动布局

• 默认文档流：

块级元素独占一行，宽高默认父级的100%
行内元素与其他元素共享一行 宽度高度都由内容决定

• 浮动布局

float: right left none onherit布局 (div ul>li )

1. 行级布局
   利用块级元素的特点

<div class="container">
	<div class="header"></div>
	<div class="content"></div>
	<div class="footer"></div>
</div>

2. 列级布局
   块元素在一行中显示
   在默认文档流中，块独占一行空间。
   浮动可以使得一个元素脱离默认文档流。
   1) 宽度，高度都由内容决定
   2) 多个浮动元素在一行中排布

2.1 子元素浮动后无法支撑父元素

<ul>
	<li>one</li>
	<li>two</li>
	<li>three</li>
	::after
	</ul>
	<div class="content"></div>
	<style>		
	ul>li {
	float:left;
	}
			
	</style>
	<!--1）one two three在一行中排布
		2）ul的高度为0
	-->

2.2 两个兄弟元素中其中一个元素浮动，一个不浮动

<style>
	.content > div {
	height:100px;
	}
	.content > .left {
	float:left;
	width:100px;
	}
	.content > .right {
		width:200px;
	}
</style>
<!--1) left right
	2) content高度为100px-->
<div class="content">
	<div class="left"></div>
	<div class="right"></div>
</div>

2.3 多个浮动在一行，如果父元素的一行中无法容纳这么多元素 换行

• 清除浮动
  对父元素
  overfloat:hidden;
  添加伪元素

::one{
	content:' ';
	display:block;
	clear:both;
}