（08）2020-12-10（清除浮动/解决父类塌陷问题、定位问题、ifont图标）

---

一、清除浮动

1，父类塌陷产生原因

前提：父元素没有设置高度，高度由子元素高度撑开。
当父元素内的子元素都浮动起来之后，脱离标准文档流，导致父元素高度变为0。即出现父类塌陷问题。

2，解决方法（不推荐，只做了解）

方法1：给父元素设置高度

不推荐理由：不能把高度固定死，不适合做自适应的效果。
（解释： 如果给父元素设置高度，高度固定之后，文档内容少的话，会留下大片空白区域。文档内容足够多的话，会溢出。高度无法自适应）

方法2：父元素添加浮动

不推荐理由：会影响后面的元素布局。
（解释：给父元素也添加上浮动之后，父元素脱离了文档流，又有了宽、高（宽和高都由父元素中内容撑开）。但是父元素下的box元素会直接填充到原来父元素的位置。影响页面布局 ）

方法3：给父元素添加添加overflow：hidden
添加overflow：hidden之后，父盒子会拥有BFC属性。
不推荐：

• 优点：简单
• 缺点：内容比较多的时候，容易造成内容被隐藏。
  （（（解释：若父盒子没有高度，给父盒子添加添加overflow：hidden之后，父盒子的宽自适应全屏，高度由子盒子宽度撑开。
  （1）当父元素内只有浮动起来的元素：由于父元素的高是由子盒子撑开，与子盒子一样高。若浮动元素中的内容足够多，超出其设置的宽高范围，也就超出了父元素范围，超出部分被隐藏。
  （2）当父元素内除了浮动起来的元素外，文档流中也有元素。
  若该元素是行内元素则会依次向右排，排满一行向下换行。
  若该元素是块状元素，会自动排到文档流中的左上角，1）当其宽高不够大，被隐藏时，其中的内容也不会显示。2）若其宽高足够大，会把父元素的高度撑大，之前浮动元素溢出内容会显示出来（全部或部分），当块状元素中内容足够多，溢出超出父框部分又会被隐藏掉。）））

方法4：设置父盒子为行内块
不推荐理由：会影响后面的元素布局。
（解释：给父元素设置 display: inline-block;之后，父元素有了子元素撑起来的宽和高。但父元素也变成了行内块元素，有一定高度和宽度，会与其他行内元素并排展示。当与其并排展示的行内元素比较少或没有与之并排展示的行内元素时，会出现大片留白区域。影响页面的排版布局。）

方法5：在父元素下添加一个清理元素，设置专门清除浮动的属性：clear（不推荐）
clear:both 不允许左侧和右侧有浮动效果。
clear本质：清理元素（拥有clear属性的元素）的顶部添加足够多的外边距，使清理元素的顶部边缘下降到浮动元素的下面。
不足：
1.浮动元素的父类仍然没有高度，父类塌陷没有解决。
2.清理元素的margin-top会失效，其他三个方向仍然有效。

eg:清理元素box:

    <div class="father">
        <div class="son1">div>
        <div class="son2">div>        
    div>
    <div class="box">boxdiv>

方法6：在父元素内设置空标签添加clear：both （不推荐）
优点：简单方便
缺点：会添加一个无意义的空标签，有违结构与表现的分离。在以后的维护过程中会十分麻烦。

 <div class