浮动
- 作用：用来解决图片和文字排版问题
- 原理：浮动的框向左或右移动 直到它的边缘碰到包含框或另一个浮动框为止
- 特点
-
脱离文档流
-
浮动元素会自动生成一个块级框 而不论其本身是何种元素
-
浮动会使行内元素转化为块元素 其宽高属性起作用
-
fixed,absolute和float同样是脱离文档流但是前者不影响其他元素的正常布局，但float会影响其他元素布局，其他元素会围绕float元素
浮动存在的问题以及如何清除浮动
对父元素造成的影响
若父级元素没有设置高度 则父级元素高度无法被撑开，
内边距和外边距的值不能正确表达
影响与父元素同级的元素布局
① 对父级设置合适的高度值 但需要提前计算好内容高度 不适用于高度不固定的父标
② 给父级元素加overflow: hidden样式 触发BFC方式，实现清除浮动
- 原理：普通流根据内容高度裁切隐藏 如果高度未设置，会先对内容全部高度进行计算，包括浮动的高度，达到清除浮动
- 缺点 ：如果设置了外边距为负值会导致元素会被裁剪掉
③ 在父元素同级的下一个元素，若为块级元素直接添加clear属性，否则新加一个style="clear:both;"空标签
④ 代替创建一个新标签的解决方法 使利用伪元素::after对伪元素设置clear属性
.parent::after{
content:" "; // 必须要设置content,不设置的话，该伪元素无效，如果不需要伪元素有内容，可以设置content: ""。
height:0; //height必须设置为0 否则会导致元素比实际高 也可不设置 默认就是0
display:block; // clear只对块级元素有效 且 :after伪元素的默认类型是内联元素
clear:both; // 清除浮动
}
对同级元素的影响
与浮动元素同级的元素会跟在其后 围绕浮动元素 影响正常布局
利用clear属性的三种方式 已有标签(块级元素) 新的空标签(块级元素) 伪元素::after
①如果浮动元素刚好有一块级元素(行内、行内块设置无效)，对该元素设置style="clear:both;"，可以不用创建新的标签
②如果无则可以在浮动元素后添加一style="clear:both;"空标签 ，但浪费了一个空标签 复用性差
③利用伪元素::after的特性搭配clear属性清除浮动
如果在父元素后使用style="clear:both;"，在父元素内float元素同级的元素布局仍受浮动的影响，即设置clear后的元素不再受浮动元素的影响,所以尽量在浮动元素后进行清新浮动
