浮动的理解

浮动的原理

float:left/right;
浮动在使用的过程中总是会发生一些意想不到的事情，我们先从浮动的原理看看。
浮动会改变元素的属性，会让一个行内元素变为类似于行内块的元素，因为此时元素的宽度为内容宽度，默认没有外边距，浮动元素还脱离文档流。

浮动的移动方式

浮动一共两个值，left和right，也就是只能往左或者往右移，那么它能移到哪里，是基于谁？
浮动只在父元素内移动，以父元素左右边界为标准，最左不过父元素最左边，最右不过父元素最右边，同时，浮动元素只会在它这一行左右移动，移动后占据相应大小的浮动位，后来的浮动元素只能在它后面排列，注意是后面不是下面，因为浮动元素脱离文档流，会导致文档流中元素上移，将浮动元素未浮动之前的位置占据，这时再将文档流元素浮动，会让这个元素左边缘与浮动元素右边缘紧贴。

浮动难点

1.浮动让元素脱离文档流，就会导致这个元素无法撑开父元素容器，从而会让与父元素同级的其它元素上移，浮动元素会盖住其它元素，布局发生错乱。
解决方法：清除浮动带来的问题。
（1）给父级元素加高度，这样父级就有了高度，不会导致其它元素上移被覆盖。
（2）在这个父级元素中最后一个浮动元素之后加一个元素，为其加上属性 clear:both；这样也可以解决浮动问题，
父级会自动计算存在的子集元素最高元素的高度，并未自己添加这个高度。
（3）给父级加overflow:hidden,这是因为让父元素紧贴内容区域（包含float元素）这样就可以达到清除浮动的效 果。
清除浮动还有很多方法，就不一一列举了，选择自己喜欢的，适合自己的才是最好的。
2.浮动位置总是不尽人意
这个问题是因为浮动会脱离文档流，，当它脱离了文档流，那么其它文档流元素就会上移，而它们再浮动就会排在前一个后面，但是如果第一个元素没做浮动，并且是块元素，第二个元素做了浮动，那这个元素就是在第二行左右浮动，因为浮动只会在自己这行浮动。而谁先谁后由你写的代码，和代码解析导致，代码是逐行解析，也就是越靠上的代码就先解析。