浮动讲解笔记

1，浮动的作用：
浮动主要就是用于元素并排显示的，块级元素从上到下独占一行，想让块级元素并排，我们的做法是转为行内块，但是会影响代码整洁度，所以我们选择浮动来做到
2, 什么时候用？
导航，网页底部，内容的横向排版……
3，如何使用浮动？
语法：
float:left | right;  左浮动|右浮动
左浮动：元素从左向右排列，依次帖向左边元素的屁股
12345
右浮动：元素从右到左排列，依次帖向右边元素的屁股
       54321
贴边原理：
浮动的元素会根据左右浮动前去贴边，但是如果前边已经有人贴边了，那就贴到这个人的屁股上，如果一行站不下，自动换行
浮动的元素脱标，会给标准流的元素带来副作用，不能给父类撑出高度怎么办？
4，元素浮动会出现的一些情况
1） 浮动的元素脱标，不在分行内元素还是块级元素
块级元素一旦浮动，没有设置宽度，宽度跟内容相关
2） 浮动元素脱标就不能使用margin: 0 auto;实现水平居中效果
3） 浮动元素自动贴边，放不下会自动换行
如果4去贴3的屁股，贴不上换行去找2的屁股，如果2贴不上去找1的屁股，如果1也贴不上，在换行贴边
中间遇到坑是不会钻进去的
4）浮动元素中在垂直方向上的margin塌陷失败，不会塌陷
margin塌陷是标准流的特性，浮动元素脱标就不会塌陷了
5）浮动元素会让出标准流
浮动元素会压盖在标准流元素之上，但是不会压盖文字
但是在技术上不允许使用者个效果做元素的压盖效果
脱标的元素会压盖标准流中的元素
6）利用5的性质制作文字环绕效果

浮动元素会让出标准流，但是会将标准流元素中的文字挤出来

一，清除浮动
1，为什么清除浮动？
清除浮动对布局带来的异常
浮动的元素脱标，脱标的元素不能给标准流的父亲撑出高度，怎么办？
2，偏方：overflow：hidden 解决问题的方法之一
原本含义：
overflow:hidden|auto|scroll;
溢出管理：隐藏|自动|滚动显示；
overflow虽然是溢出管理，但是可以做到让浮动的儿子给父亲撑出高度：overflow：hidden;
3,父亲有高度，可以管住自己的儿子
如果给父亲设置高度，浮动的儿子就不会影响其他儿子
一般情况我们不会直接给父亲高度，因为我们不确定儿子究竟有多高
4，清除浮动的方法：
1）clear：both;
这是清除浮动最标准的方法
语法：
0clear:both|left|right;
清除左右浮动，清除左浮动，清除右浮动
儿子浮动，clear要给父亲设置
margin:标准流元素设置margin只能找标准流元素，浮动元素设置margin只能找浮动元素
问题：
（1）父亲的高度依旧撑不出来
（2）两个父亲之间的margin基本失效
一般我们不用这个进行清除浮动
2）隔墙法
隔墙法很有用，一般用在页面中大块与大块之间，小块之间还是存在一定的问题
隔墙法：将两个块隔开，使得彼此儿子不会相互影响
问题：
（1）父亲依旧没有高度
（2）margin是对墙设置的，可以用墙的高度
3）内墙法
在父元素内部的最下边设置一个墙，这种情况下，高度有了，margin好使了，所有问题全部解决
问题：
内墙法使用的HTML标签太多没有语义，看起来不爽，所以内墙法用的也不多
4）伪元素法
不是标签，但是可以向内墙法一样解决问题，可以替代标签，不用担心语义的问题
5)overflow
溢出隐藏
5，总结
清除浮动的方法有很多，但是只有overflow：hidden;是最为常用的，大部分只存在于面试过程中，在编程过程中大块之间偶尔会使用外墙法