前端小白浮动流

HTML+CSS中遇到的问题合集及解决办法
浮动布局的注意事项
01、利用浮动布局的时候，建议给浮动的元素嵌套一个父级元素，然后给父级最好 设置固定的高度，就减少出现兼容问题；
02、如果要用浮动布局做修改，所有的父级盒子都必须浮动，不然不符合规范；

浮动的特点
浮：
浮动之后的元素脱离了标准流；
漏：
盒子浮动之后脱离的标准流原来的位置就空了，下面的盒子会补上来；
特
1、浮动之后的盒子的显示模式会更改为行内块元素的特点；
2、浮动之后的元素之间的没有缝隙的，紧贴在一起，顶部对齐；
3、如果父级盒子不够宽装不下浮动的盒子，盒子会掉下来另起一行；

    我们需要使用浮动来实现网页的布局效果，比如左右布局；

实际工作中我们一般都是用浮动来进行页面布局的；

浮动布局的原理应用
让元素脱离文档流，进行页面效果的布局；

浮动元素与父盒子的关系
浮动之后的子元素是以父级盒子为参照对齐的，不会与父级的边框重叠，也不会超出父级盒子的内边距；

浮动元素与兄弟盒子的关系
1、浮动元素和兄弟盒子都浮动了两个盒子都会在一行显示；
2、做布局的时候所有的盒子必须都浮动，才能完成效果；
3、浮动的元素顶端对齐，两个元素之间没有缝隙

清除浮动的本质：
在布局的时候如果父级盒子没有设置固定的高度，里面的子级盒子进行浮动设置，父级盒子就不会被撑开，就会*影响我们后面的盒子布局；*清除浮动之后，父级就会根据浮动的盒子自动检测高度，从而解决影响下面盒子的布局问题；

清除浮动的三种方法：
1、给最后一个浮动元素的下方就近添加一个额外的空标签，在相应的CSS中输入属性值**｛ clear: both;}** ***[清除左右两个方向的浮动流]***使浮动流不会影响下一个盒子布局的位置。
2、给浮动盒子的父级CSS属性加上{ overflow: hidden;}.不常用，会导致超出盒子的内容隐藏不见。
3、伪元素清除浮动：给浮动盒子的父级CSS加上 .clearfix:after {centent: “”;display: block; height: 0px; visibility: hidden; clear: both;} .clearfix { *zoom: 1; “兼容IE6、7的清除浮动模式”}。现在最流行使用的
4、双元素清除浮动：了解一下。