浮动的初体验

问题：在页面上有两个盒子，一个盒子靠着屏幕左侧显示另一个盒子靠着屏幕的右侧显示？
作用：解决一行中显示多个盒子的问题（并且这些盒子的位置可控。）
浮动的代码：
float:left;
float:right;

浮动的特点

标准流：就是浏览默认摆放盒子的标准。
==浮动的元素会脱离标准流==：
==如果一个元素按照正常的标准流来显示，会在html中所属的位置占位，后面的元素会紧跟着它。==但是浮动脱了标准流，将来在看到浮动的元素之后，不能以正常的标准流来进行判断。（在标准流中不占位置了，它是在标准流之上）
浮动以后的元素会覆盖在标准流的元素之上。
浮动规则：浮动找浮动，不浮动找不浮动
浮动找浮动：只有写在同一个结构下面的浮动才会浮动找浮动。

浮动显示的位置与原本不浮动之前的位置是对应的：
浮动的重点：==********浮动的元素只会影响下面的元素，不会影响上面的元素********==：
浮动的元素会改变显示方式：
不管元素是行内元素还是块级元素将来在显示 的时候都会在同一行中显示。
浮动以后的元素可以设置宽高。
==总结：浮动以后的元素的显示方式与行内块级元素一样。==

浮动的案例：
1.0使用浮动完成页面的布局

2.0制作导航
注意：以后使用a标签直接来制作导航是有问题的

1.0导航与导航之间应该是列表的关系，所以如果想要将这个些关系通过html语义化表示出来必须要用到ul标签。

2.0如果这些a标签你不用其它的标签包裹起来，那么将来浏览器会将这些a标签中的文字当作全部一起显示。SEO在查
看页面的时候会认为这个页面进行作弊，就是进行了关键字的堆砌。
必须要用ul中的li标签将a中的内容包裹起来。
3.0文字环绕图片

清除浮动

浮动对页面的影响：

如果一个父盒子中有一个子盒子，并且父盒子没有设置高，子盒子在父盒子中进行了浮动，那么将来父盒子的高度为0.由于父盒子的高度为0，下面的元素会自动补位，所以这个时候要进行浮动的清除。
float: left;float: right;
清除浮动：clear:both;

使用额外标签法：

在浮动的盒子之下再放一个标签，在这个标签中使用clear:both，来清除浮动对页面的影响。

内部标签：在浮动盒子的下边加一个空盒子。

会将这个浮动盒子的父盒子高度重新撑开

外部标签：在浮动盒子的父级的下边加一个空盒子。

会将这个浮动盒子的影响清除，但是不会撑开父盒子。
注意：一般情况下不会使用这一种方式来清除浮动。因为这种清除浮动的方式会增加页面的标签。

使用overflow属性来清除浮动：

先找到浮动盒子的父元素，再在父元素中添加一个属性：overflow:hidden,就是清除这个父元素中的子元素浮动对页面的影响。
注意：一般情况下也不会使用这种方式，因为overflow:hidden有一个特点，离开了这个元素所在的区域以后会被隐藏（

使用伪元素来清除浮动：

.clearfix:after {
content: "";//添加内容为空
height: 0;//内容高度为0
line-height: 0;//内容文本的高度为0
display: block;//将文本设置为块级元素
clear: both;//清除浮动
visibility: hidden;//将元素隐藏
}
.clearfix {
zoom: 1;/为了兼容ie6/
}

使用双伪元素清除浮动：

伪元素：在页面上不存在的元素，但是可以通过css来添加上去。
种类：
:after（在。。。之后）
:before（在。。。之前）
注意：每个元素都有自己的伪元素。

overflow:溢出

取值：
hidden：会将超出容器的部分隐藏起来
scroll：给容器加上滚动条（==使用时注意设置内容高度，这样才能滚动起来。）==
auto：根据具体情况判断容器是否要加上滚动条

元素的隐藏：

overflow:hidden//将超出的部分裁剪掉
==visibility: hidden==//可以将元素隐藏，但是在页面上还保留着原来的位置。（停薪留职）
==display: none==;//可以将元素隐藏，并且在页面不占据位置。
diplay:none与display:block是一对反义词。