前端学习记录——CSS浮动与清除浮动

浮动：
1、基本概念：浮动就是我们的排版脱离了正常的文档流，浮动在标准流之上。
2、浮动规则：
a、相同方向上的浮动元素，先浮动的元素在前面，即距离他的父级元素的边框更近，反之亦然；
b、不同方向上的浮动元素，左浮动往左边走，右浮动往右边走；
c、浮动元素浮动之后的位置由他在标准流之中的位置决定。（这一规则是浮动的重点和难点，需要仔细揣摩）
需要注意的是浮动元素不能撑起父元素的高度，正是这个现象导致浮动元素总是按照上述的跪着进行分布，但是有些时候，我们不需要这样的布局。由此，引出一个新的问题，即清除浮动：
清除浮动的方式1：给父元素添加高度；这种方法在企业开发中应用较少，因为企业开发中能不设置高度，就不设置高度。
清除浮动的方式2：用clear属性清除浮动，这种方法能够达到清除浮动的效果，但是使用这种方法会导致margin属性失效。
清除浮动的方式3：外墙法和内墙法，基本原理就是在两个盒子之间添加一个块级元素分隔两个盒子。
清除浮动的方式4：用伪元素标签法。
基本格式：ele::after
原理和内墙法有点像。
清除浮动的方式5：利用overflow标签清除浮动。
overflow作用：
overflow作用一，设置滚动条是否显示
overflow作用二，设置对象内容超出后是否隐藏超出内容
overflow作用三，当子级设置float，父级可以设置overflow让父级紧贴内容，避免浮动出现。