CSS（三）|CSS（三） - 定位模型 - float的几要素
要点
1.浮动盒子会脱离文文档流，不会在占用空间。
2.非浮动元素几乎当浮动盒子根本不存在一样该怎么布局怎么布局不会被影响
3.非浮动元素中的文本内容会记住浮动元素的大小，并在排布时避开它,为其留出响应的空间
4.清除浮动本质：浏览器在非浮动元素的上方添加足够大的外边距，从而将元素的上边沿垂直向下移动到浮动元素的下方。
使用浮动
【CSS（三）|CSS（三） - 定位模型 - float的几要素】浮动盒子会脱离文档流，不会再占用空间。
文章图片
常规流中的其他块级盒子（非浮动元素）几乎当浮动盒子根本不存在一样该怎么布局怎么布局不会被影响。
但是非浮动元素中的文本内容会记住浮动元素的大小，并在排布时避开它,为其留出响应的空间。
事实上，浮动就是为了在网页中实现文本环绕图片的效果而引入的一种布局模型。
文章图片
清除浮动
要阻止行盒子环绕在浮动盒子外面，需要给包含行盒子的元素应用clear属性，用于指定盒子的哪个一侧不应该紧挨着浮动盒子。
浏览器会在清除浮动的元素上方添加足够大的外边距，从而将元素的上边沿垂直向下移动浮动元素的下方。
如果要给已清除浮动的元素添加外边距，除非超过浏览器自动加的值，否则不会有什么效果。
文章图片
::after
文章图片
文章图片
BFC中浮动的处理
文章图片
补充
当一个盒子中全是浮动元素时
如果包含元素太窄，无法容纳所有浮动元素水平排列，则后面的浮动元素会向下移动。
如果浮动元素的高度不同，则后面的浮动元素在向下移动时可能会卡在前面的浮动元素右侧。
文章图片
float影响display
2020年7月9号补充：
由于float意味着使用块布局，它在某些情况下修改display 值的计算值：
文章图片
推荐阅读
- 如何将窗口定位到页面中间
- 有效育儿十三一一思考之后再说话
- 十里桃花劫后劫（电视剧《三生三世十里桃花》戏续）
- 当繁星点亮夜空——致我怀念的高三老师们
- 《因为遇见你》虽然已经播完，但这三个挖好的坑忘记填了
- 人像摄影新手最常犯的三个错误
- 第一部夷夏平衡|第一部夷夏平衡 第十三章伊水羿庙
- 写给三十岁的自己
- CSS|CSS（四）盒子模型+圆角边框+盒子阴影+文字阴影
- #|CSS3新特性