float和position

• float

1. 元素被浮动后，浏览器实际上将它渲染到一个专门为float元素准备的plane中了。也就是说它从普通文档流中脱离了出来
2. 虽然已经从普通文档流中脱离出来了，但是它还任然会影响普通文档流中的其他元素的布局。这是因为其他元素要围绕着它，就像对一张图片浮动后，其他文字要围绕着它一样。兄弟块元素之间进行相对的定位均基于移动后的新位置进行重新渲染
3. 移动后可以用margin定位,top/left无效

4. 会让元素以display:inline-block的方式显示：可以设置长宽，默认宽度并不占满父元素(默认以最小宽度高度显示)，就算我们显示地设置display:inline或者display:block，也仍然无效

5. 仍从属其父元素（可通过其父元素的 width/height + overflow 观察）

• position

1. relative:相对自身原来位置定位,但仍然保留原位置的占位,定位关键字使用left/right/top/bottom, left/top使用百分比时相对于自己的宽度高度
2. absolute:相对父元素非static元素定位, 会让元素以display:inline-block的方式显示, left/top使用百分比时相对于父元素的宽度高度

　　　　　　　　

子元素是float造成容器坍塌解决:

　　末尾添加<div style='clear:both'></div>

　　外层overflow:auto

　　:after中添加清除浮动标签

 

 

 

 

 

转载于:https://www.cnblogs.com/iori-zy/p/3247110.html