CSS核心浮动float总结

格式：float: left / right / none none默认的不浮动 left会向左边进行浮动，right会向右边进行浮动。 浮动的做用是为了让男标签并排显示。 浮动的特色： 1.若是有左浮动，又有右浮动，那么你须要把右浮动的元素写在左左浮动的前面。
2.在一个父元素内部，若是一个元素浮动了，那么它就脱离了标准文档流，后面的元素就让向上排，它也会形成对后面的兄弟元素影响。解决：clear:both/left/right 。 3.浮动并无彻底地脱离了标准文档流（破坏性--->flex），若是后面的元素内部有文字，这些文字会环绕在浮动元素的周伟，产生字围。 4.若是多个元素浮动了，那么这们就会并排显示，若是都是同一个方向的浮动，它们会牢牢地贴在一块儿。当父元素宽度变小时，装不下全部的子元素时，后面的子元素有贴靠性。当父元素小到极限时，里面的浮动的子元素宽度是不会改变的。 5.若是一个元素浮动了，先向上移动，直到贴靠到父元素的边界，接着，若是是左浮动，就向左移动，直到移动到父元素的左边界，若是是向右浮动，就向右移动，直接移动到父元素的右边界。 6.若是一个元素没有设置高度，它的高度是靠里面的内容撑起来的。若是父元素内部元素都浮动了，那么会形成父元素的高度塌陷。 7.若是元素浮动了，那么它会形成影响：形成父元素高度塌陷。解决:显示加高度（加高法） 小偏方（overflow:hidden），可是若是父元素也浮动了，那么就不会出现高度塌陷了。 8.当一个浮动起来的男盒子，没有设置width，那么这个盒子的宽高会尽量小，小到包裹住它里面的内容，这叫包裹性。 9.若是一个元素浮动了，它会悄悄地作一个变性手术。若是一个女盒子浮动了，那么就能够设置宽高了，至关于把它变成男标签。

元素浮动会形成影响（清除浮动）： 1，对父元素形成的影响 父元素高度塌陷解决：显示加高度（加高法） 小偏方（overflow:hidden） clear:both 加高法：简单 基本不用 大部分状况状况下，父元素的高度是须要子元素撑起来 overflow:hidden : 简单 使用了overflow:hidden 父元素的高度会随着子元素的高度变化而变化overflow:hidden本职工做是用来处理溢出 在使用过程当中，须要注意子元素若是想要超出父元素高度，此时overflow:hidden就不适合了。 clear:both 在全部子元素后面加一个空的div 在这个div上面加clear:both ---> 内qiang法。优势：clear:both专业清除浮动的 缺点：多写一个代码 2，对后面兄弟元素形成的影响 兄弟元素会向上移动解决：在受影响的元素上面的加 clear:both

项目中最经常使用清除浮动的方法： 利用伪元素 after 就是写一个清除浮动的类，以下： .clear:after{content=""; display:block; clear:both; height:0; overflow:hidden;}

。