这是我参与更文挑战的第29天，活动详情查看：更文挑战
浮动
float: 浮动，漂浮。
属性值：left(左浮动)
right(右浮动)
float: left;
浮动元素性质
浮动的元素脱离标准文档流
体现：不在区分块级元素和行内元素，既可以设置宽高，又可以并排显示。
div {
width: 200px;
height: 200px;
background-color: lightblue;
display: inline;
float: left;
}
span {
width: 200px;
height: 200px;
background-color: pink;
display: block;
float: left;
}
浮动贴边显示
- 以左浮动为例（元素依次贴边显示）
- 父盒子宽度不够，子盒子也会自动换行，
继续向前一个元素贴边显示
- 子盒子不会钻盒子
浮动元素双向贴边
<div class="box">
<p>1</p>
<p class="fr">2</p>
<p>3</p>
<p class="fr">4</p>
<p>5</p>
<p class="fr">6</p>
<p>7</p>
</div>
浮动元素没有mg塌陷
上下两个同级排列浮动的元素，上盒子有一个下mg，下盒子有一个上mg，他们的距离是mg之和。没有垂直方向mg塌陷。
<div class="box">
<p class="no1">1</p>
<p class="no2">2</p>
</div>
浮动元素让出标准流的位置
两个同级盒子，第一个盒子浮动，第二个盒子不浮动，结果浮动的元素让出标准流的位置，视觉上形成了“压盖效果”。
.box1 {
/*浮动脱离标准流*/
float: left;
width: 100px;
height: 100px;
background-color: lightblue;
}
.box2 {
/*不写浮动就是标准流*/
width: 200px;
height: 200px;
background-color: pink;
}
压盖效果不用浮动，而是用定位实现。
总结：同级元素要浮动都浮动，要不浮动都不浮动。
字围效果
浮动元素会压盖住标准流，但是文字不会被压盖住，而是在浮动元素一周显示。
二、浮动存在的问题
1浮动的元素不能撑高父盒子的高度（高度自适应）
2 浮动的元素影响后面浮动的元素。
.box {
width: 600px;
/*不给父盒子添加高度*/
border: 10px solid #000;
margin-bottom: 10px;
}
.box p {
float: left;
width: 100px;
height: 100px;
background-color: lightblue;
margin-right: 10px;
}
<div class="box">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</div>
<div class="box">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</div>
直接给父盒子添加高度
解决：对后面浮动元素的影响
没解决：高度自适应
clear属性
clear: 清除浮动的影响
属性值：left (清除左浮动的影响)
right(清除右浮动的影响)
both(清除左右浮动的影响)
给父盒子添加clear属性
.box2 {
/*box上面4对后面1造成影响 添加clear*/
clear: both;
}
解决：对后面浮动元素的影响
没解决：高度自适应
外墙法
在两个大盒子（父盒子）之间添加一堵“有高度”“清除了浮动”的墙
<div class="box">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</div>
<!-- 加一堵墙 块级元素 -->
<div class="cl"></div>
<div class="box">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</div>
内墙法
在所有浮动元素的最后添加一堵清除了浮的墙。
<div class="box">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<div class="cl"></div>
</div>
<div class="box">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<div class="cl"></div>
</div>
解决：问题都解决了
所有所有问题都解决了，但是我们不使用这种办法，给网页结构增加了很多无意义的标签，增大网页加载。
overflow属性
overflow: 溢出隐藏处理方法
auto: 溢出滚动，当内容超过盒子高度时，自动出现滚动条，拉动滚动滚动条可以查看全部内容。
hidden: 溢出隐藏(当内容超过盒子高度时，超出部分直接隐藏)
隐藏的是border之外的内容，对于下padding不隐藏。
浮动解决：给父盒子添加overflow:hidden可以完美的结果所有的问题。
<div class="box"> //overflow:hidden
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</div>
<div class="box"> //overflow:hidden
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</div>
overflow:hidden两个引申含义（给父盒子添加overflow:hidden）
1强制让父盒子检测内部子元素高度，并且将检测到的高度撑高自身。
2 强制让父盒子管理住浮动的子盒子，不让子盒子影响其他浮动的元素。
总结：同级元素要浮动都浮动，子盒子浮动，父盒子尽量添加overflow:hidden(height)。
a标签
3.1伪类
a标签有4个特殊属性和状态，根据用户的不同行为，显示不同的状态。
a:link a标签未点击前状态
a:visited a标签点击后的状态
a:hover a标签悬停状态
a:active a标签激活状态
a:link {
color: red;
}
a:visited {
color: pink;
}
a:hover {
color: blue;
}
a:active {
color: green;
}
伪类和类.box区别：
伪类和类一样也有权重，和类权重相同。
伪类样式不能直接加载，只有用户触发相应的行为，a标签才能渲染对应的效果；
.box类样式直接渲染在浏览器不需要用户干预。
3.24个伪类顺序不能颠倒
a:link a:visited a:hover a:active(love hate)
4个伪类顺序不能颠倒，颠倒之后不能正常渲染效果。
/*错误顺序*/
a:visited {
color: blue;
}
a:hover {
color: red;
}
a:active {
color: green;
}
a:link {
color: orange;
}
因为4个伪类也有权重，，书写顺序错误，后面的会层叠掉之前。
最终a:link将之前的伪类都层叠掉。
应用
在使用a标签一般只需要渲染a:hover，其他的样式和a标签相同。
a标签设置样式属性都将加载在4个伪类身上。
有特殊样式再用伪类层叠（只需要将特殊样式书写在伪类选择器上）
a标签是行内元素，想设置宽高，必须转块。a标签颜色和下划线必须单独设置，不能从祖先继承
按钮：
/*a标签样式可以渲染在4个伪类身上*/
a {
/*a标签是行内元素 想设置宽高必须转块*/
display: block;
width: 200px;
height: 80px;
background-color: lightblue;
/*块级元素水平居中*/
margin: 50px auto;
/*文字属性*/
font-size: 30px;
text-align: center;
line-height: 80px;
}
a:hover {
/*伪类只需要书写特殊样式*/
background-color: pink;
color: #fff;
}
导航：
.nav ul li {
float: left;
width: 120px;
height: 40px;
}
.nav ul li a {
/*a转块*/
display: block;
height: 40px;
background-color: lightblue;
text-align: center;
line-height: 40px;
}
.nav ul li a:hover {
background-color: pink;
color: #fff;
}
/*当前选中哪一个nav 特殊效果 表示类名轮换cur active selected*/
.nav ul li.cur a {
background-color: pink;
color: #fff;
}
