浮动是相较于行内块而言的，浮动不会产生间距，而且浮动是可以使用margin来控制两个元素之间的距离，因此浮动的横向布局相比行内块使用更加方便，更好用的。
浮动作用：在页面上实现横向的布局。
特点：
1.浮动的元素不占标准流的位置，不占据空间。
2.浮动元素碰到包含它的边框或者浮动元素的边框停留。
3.浮动元素永远不会压住文字。
4.父元素是标准流，子元素浮动时，父元素记得给高度。【否则子元素一旦浮动后，会导致父元素个高度为0】
5.浮动的元素只会影响后面的标准流元素。
6.浮动是不能继承的。
值：float:none|left|right;（none是标准流，left是靠左浮动，right是靠右浮动）
所谓的标准流，就是标签按照规定好的默认方式排列。即标准流为从上到下，从左到右排列的。
面试题：
（1）为什么横向的排列布局很少使用行内元素方式，而一般采用浮动方式实现？
答：使用行内块实现横向布局的缺点：两个元素之间的换行，会多出来的一个空格，而这个空格的大小又是取决于font-size的大小，因此我们不好控制其两个元素之间的距离。
（2）为什么清除浮动？
答：由于浮动元素不用占原文档流的位置，所以它会对后面的元素排版产生影响。
例如：因为父级盒子很多情况下，不方便给高度，但是子盒子浮动就不占位置，最后父级高度为0，就影响了下面的标准流盒子。准确地说，并不是清除浮动，而是清除浮动造成的影响。
（3）清除浮动的方式？
答：清除浮动的方式有四种。
a.使用空标签清除浮动
这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。
b.使用after伪对象清除浮动
#parent::after{
content: "";
height: 0;
visibility: hidden;
display: block;
clear: both;
}
c.溢出隐藏
overflow: hidden;
d.浮动外部元素
网友评论