float

含义：浮动布局，使用后会使元素向左或者向右移动

取值：

left	左浮动

right	右浮动

none	【默认】不浮动

特点：

1、使用浮动的元素会脱离文档流【置物架】

2、使用浮动的元素的宽、高度默认由内容决定，可设置宽、高

3、原先所在位置就会被其他块元素填充

4、浮动元素在一行中依次排列，当一行无法容纳的时候会自动换行

案例：

1、全部浮动

2、左边浮动，右边不浮动

3、左右浮动，中间不浮动

中间的元素要写在最后面
 清除浮动的方式
 	1、浮动元素的父级元素： overflow:hidden;
 	2、浮动元素的父级元素： ::after{clear:both;content:'';display:block;}
 	3、浮动元素的同级：添加一个空标签，并且设置clear:both;
 1) 七列布局
 2) nav的伪元素竖线
 拓展
 	如何让元素使用margin:0 auto，水平居中
 	只对块级元素生效，所以margin:0 auto的用法分为三种，分别为
 		块级元素：div、h1~h3、ul
 			/*对于块级元素，只需要设置width*/
 			div{
 				width: 200px;
 				background-color: #ccc;
 				margin:0 auto;
 			}

 		行内元素：span、a
 			/*对于行内元素，需要先设置为块级元素，再加宽度*/
 			span{
 				display: block;
 				width: 100px;
 				background-color: red;
 				margin:0 auto;
 			}

 		行内块元素：button、img、input、textarea
 			/*对于行内块级元素，需要设置为块级元素，可以不用设置宽度*/
 			input{
 				display: block;
 				margin:0 auto;
 			}

float left |right | none 
向左浮动  向右浮动 清除浮动

一些标签会自带浮动布局, 此时要想清除掉这些浮动 需要使用float   none

常用标签 

标题标签是   h1-h6 双标签  块级标签

h1是最大的标题标签  最好只出现一次  用于网页的logo部分  

h2常用于二级标题, 也就是子模块的标题部分.

h4 -h6 不常用的

dislipay:block (显示为块级)|inline(显示为行级)|none(不显示)

none : 元素不会被显示

black: 此元素会被显示为行级元素,元素前后自带换行符 

inline:此元素会被显示为行级元素,元素前后不会带换行符

inline-block :行内快元素 设置了inline-block 属性的元素既拥有了block元素可以设置width和font-weight:bold(设置为粗体)
|normal(设置为正常字体)


列表标签
列表标签分为:
有序列表(ol ki): 组合标签  双标签  块级  
ol  li 必须精密相连成对 出现 不能分开

无序列表(ul  li): 组合标签  双标  块级  
ul  li  成对出现
自定义列表: 如 字典列表  双标签  块级  dl td  dd

**
页面布局——浮动布局

浮动布局是页面的一种重要布局方式

它使用float属性为元素开启浮动，float属性的可选值有left、right、none

none 是默认值，即不开启浮动

left 向左浮动，靠父元素的左边浮动

right 向右浮动，靠父元素右边浮动

元素浮动前位于文档流中的特点

块级元素（block）：在文档流中独占一行，宽度默认是父级的宽度，高度默认由内容撑开，可为其自定义设置宽高；


行内元素（inline）：在文档流中不独占一行，宽和高都默认由内容撑开，且不可为其自定义设置宽高；


行内块元素（inline-block）：在文档流中不独占一行，宽和高都默认由内容撑开，可为其自定义设置宽高；

元素浮动后的特点

浮动元素完全脱离文档流，不再占据文档流中的位置


块级元素（block）、行内元素（inline）、行内块元素（inline-block）脱离文档流的特点：

不再独占一行，宽高默认由内容撑开，但可以为其自定义设置宽高，即均呈现行内块元素（inline-block）的特点

下图做了一个小小的测试——元素脱离文档流后均呈现行内块元素的特点



2. 浮动元素默认不会从父元素中溢出

3. 浮动元素的层级会提升，从而遮挡住未开启浮动的元素

4. 浮动元素会遮挡未开启浮动的元素，但不会盖住未开启浮动的文字，文字会自动环绕在浮动元素周围

5. 浮动元素不会超过它前一个浮动的兄弟元素，最多就是和它一样高
总结： 浮动首先要搞清楚元素浮动后呈现的特点，不论是块级元素、行内元素还是行内块元素，他们浮动脱离文档流后均会呈现出行内块元素的特点：不独占一行，宽高默认由内容撑开，但可以为其设置自定义宽高。后面几个特点可以自己敲一个简单的测试来验证一下。
**

默认文档流：

块级元素独占一行，宽高默认父级的100%

行内元素与其他元素共享一行 宽度高度都由内容决定

浮动布局

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

行级布局

利用块级元素的特点

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


列级布局

块元素在一行中显示

在默认文档流中，块独占一行空间。

浮动可以使得一个元素脱离默认文档流。

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;
}