CSS浮动

一、DIV

1、div设置（上）

DIV简介：DIV是层叠样式表中的定位技术，全称division,有时把div称为图层或块

overflow属性设置

属性	作用
visible	默认值。内容不会被修剪，会呈现在元素框之外
hidden	超出的部分被隐藏
scroll	不论是否需要，都显示滚动条
auto	按需显示滚动条以便查看其余的内容

2、div设置（下）

CSS轮廓：outline
作用：绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用
示例：outline：dashed(虚线轮廓)、dotted(点状轮廓)、solid（实线）、double（双实线）等

CSS边框：border-left、border-right、border-top、border-bottom
作用：设置DIV边框的边线宽度、颜色、虚线、实线等样式css属性
示例：border-bottom:solid;（设置下边框线为实线）

二、盒子模型

1、盒子模型（上）

盒子模型 width，height，border，margin，padding
margin：上 右 下 左 div与div之间的关系
padding：上 右 下 左 div设置内部关系

2、盒子模型（下）

box-sizing：padding的距离由哪里产生

属性值1：content-box：在宽度和高度之外绘制元素的内边距和边框

属性值2：border-box：已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度

示例：设置padding-right：20px；
会在div的整体效果上右边多出20px，从外边拿过来的

三、浮动

1、行级元素与块级元素

行级元素：行内元素和其他行内元素都会在一条水平线上排列，都是在同一行的
示例：a标签、label、img、span等

块级元素：块级元素在默认情况下，会独占一行
示例：div、h标签、li、table等

2、定位机制

定位机制 - 块级元素

文档流 -
①空白折叠现象 - HTML代码的回车会显示为一个空格
②高矮不齐，底边对齐
③自动换行，一行写满，换行写 [写满是相对容器而言]

3、浮动

float属性设置

属性	作用
left	元素向左浮动。
right	元素向右浮动。
none	默认值，元素不浮动。

  float层在原层次上方，有float属性的元素会出现在float层所以会产生覆盖效果
  设置了float的元素位置并不会直接移动到最上面的一行,如果前面有float属性的元素则会出现在与之同一行的位置至于是紧挨着还是分别在两边要看float属性，当然如果两个具有float属性的元素中间夹着一个不含float属性的元素那么他们不会出现在同一行

4、float包裹和崩溃

崩溃 - float作为父级元素，高度发生了破坏
【将子元素设置为浮动之后，父元素在没有指定高度的情况下，父元素的高度将不存在】

块级元素特性，如div
在div未进行高度等设定时，
div的高度就是 div里面内容的高度
div的宽度，默认为填满上一级所在的宽度，如body等…
若内容为空，则div就是一条上下重合、左右重合的线

5、包裹特性

vertical-align:bottom;垂直对齐方式为下边框。
包裹性：当div设置浮动后 宽度会自适应其内容的宽度。

行级元素都会出现块级元素包裹多出（基准线）
块级元素默认宽度就是父级元素的宽度，div设置为float 产生包裹特性
解决 将img转换为块级元素 vertical-align:botom
垂直对齐方式：底部对齐；行级元素转块级元素

float 包裹特性
块级元素默认宽度就是父级元素的宽度，div设置为float 产生包裹特性，宽度为图片的宽度
vertical-aglin：bottom；
垂直对齐方式：底部对齐；行级元素转块级元素

6、浮动的其他特性

1）段落和div进行混排
注：设置浮动后，元素会脱离文档流，所以4-4中，div重合了。但是4-10中，文字并没有脱离文档流，所以图片和文字并不会重合。
※对div1设置了浮动是指对div1平级的其他元素受到浮动的影响。
（1）

<div id="div1">
<img src="image/wudaojiaoshi.jpg"/>
</div>
<p>........</p>

div1设置了浮动，只有div1和图片是浮动。p不是浮动，只是div1浮动之后会影响p的布局
（2）

#div{
background-color: red;
float: left;
}
img{
vertical-align: bottom;
}
p{
text-align: justify;  两端对齐
line-height: 1.5em;  (1.5个字符的行间距)

（除了用px，还可以用em，em是指当前页面上采用的字体大小的单位，1em就是一个字的距离，2em就是两个字的距离）
}
浮动的元素会脱离文档流，会覆盖同属于文档流的p元素。
但是p标签中的文字属于文本流，所以浮动的元素不会覆盖文字，就形成了图文环绕的现象。
3）段落和图片混排
※对应当img与p平级的时候，就需要设置img的浮动，才能使得对应的平级元素p受到浮动影响，出现图文混排的内容。

（1）<div id="div1">
<img src="image/wudaojiaoshi.jpg"/>
<p>........</p>
</div>
（2）#div{
background-color: red;
float: left; （不用加，下一段落文字也会围绕图片）
}
img{
vertical-align:bottom;
float: left;
}
p{
text-align: justify;  两端对齐
line-height: 1.2em;9、浮动的其他特性

重中之重：

• 文档流是相对于盒子模型讲的。
• 文本流是相对于文字段落讲的。
• 元素浮动之后，会让它脱离文档流，也就是说当它后面还有同辈元素时，其他同辈元素会无视它所占据了的区域，直接在它身下布局。但是同辈的文字却会认同浮动元素所占据的区域，围绕它布局，也就是没有脱离文本流。

这就是为什么本节中文字（处于< p >中且未设置float）会环绕图片（已设置float:left）的原因

四、清除浮动

1、清除浮动

为什么要清除浮动？
为了父元素不会出现 高度崩塌；如果强制规定外层容器的尺寸，则显得就不那么灵活了，高度就不能自动适应了；从某个元素开始 不在需要浮动效果了。
（1）清除浮动1：

1）<div id="div1">
		<div id="div2"></div>
		<div id="div3"></div>
		<div id="div4"></div>
	</div>
2）#div1{
	background-color: red;
}
#div2{
	background-color: yellow;
	float: left;
	width: 200px;
	height: 200px;
}
#div3{
	background-color: blue;
	float: left;
	width: 220px;
	height: 220px;
}
#div4{
	background-color: black;
	width: 240px;
	height: 240px;
	clear: both; /*从div4开始就不再浮动了 */
}

（2）清除浮动2：

1）<div id="div1">
		<div id="div2"></div>
		<div id="div3"></div>
		<div id="clearDiv"></div>
		<div id="div4"></div>
 	</div>
2）#div1{
	background-color: red;
}
#div2{
	background-color: yellow;
	float: left;
	width: 200px;
	height: 200px;
}
#div3{
	background-color: blue;
	float: left;
	width: 220px;
	height: 220px;
}
#div4{
	background-color: black;
	width: 240px;
	height: 240px;
	/*clear: both;*/
}
#clearDiv{
clear: both;
}

（3）清除浮动3：

1）<div id="div1">
		<div id="div2"></div>
		<div id="div3"></div>
		<div id="clearDiv"></div>
		<div id="div4"></div>
 	</div>
2）#div1{
	background-color: red;
}
#div2{
	background-color: yellow;
	float: left;
	width: 200px;
	height: 200px;
}
#div3{
	background-color: blue;
	float: left;
	width: 220px;
	height: 220px;
}
#div4{
	background-color: black;
	width: 240px;
	height: 240px;
	/*clear: both;*/
}
#clearDiv::after{
	content: ""; /* 新增的内容为空*/
	visibility: hidden; /* 新增的区域隐藏*/
	height: 0px; /*新增的区域高度为0 */
	display: block;  /* 设置为块级元素*/
	clear: both; /* 这个区域两边都不可以出现浮动元素*/
}
#clearDiv{
	zoom:1;
/* Zoom属性是IE浏览器的专有属性，它也可以清除浮动等。也可以理解为一种清除浮动的方法。使用方式，一般是在某个项目中，需要各种浏览器支持时，就需要再添加上zoom。*/
}

注：

1. 在一个div中，如果没有内容，此时的height(高度)默认为0，这里clearDiv中没有内容，所以默认行高就是0px；
2. content属性与::after 伪元素配合使用，来插入生成内容,在这里是为了设置clearDiv的插入内容为空.
3. ::after用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素，行内元素本身就可以并排显示，所以clear对行内元素不起作用，这里需要将这个元素使用display:block;变为块状元素。