快速了解CSS中的浮动

CSS中的核心一是盒子模型，二是浮动。
今天总结一下关于浮动的知识。

如果不是使用浮动，只按照不同种类的标签进行布局，这种布局方案叫流式布局。
不足：不能让块级标签并排系那是

所谓的流式布局，就是按照标准文档流进行的布局。流式布局就是遵循标准文档流进行的布局方案。

流式布局：
  按照标签的特征，进行的默认布局，从上到下，从左到右进行排列，块级元素独占一行，行内元素并排显示

浮动布局：
  目的：可以让块级元素在同一行上并排显示。让一个块级元素在同一行并排显示的方案比较多，浮动仅仅是其中一个方案而已。而浮动是半脱离标准文档流。

浮动案例参考：
盒子浮动的几种方式 https://blog.csdn.net/qq_39162309/article/details/104432408

---

浮动刚创建出来时，并不是为了实现块级元素并排显示的。是实现所谓的字围效果，文字绕着图片走，就是所谓的字围效果

.box{
        width: 300px;
        height: 200px;
        margin: 0 auto;
    }

<div class="box">
        <img src="./img.png" width="100px" height="60px" style="float: left;">
        <p>澳大利亚山火一直不停当地居民抱怨澳大利亚山火
            一直不停当地居民抱怨澳大利亚山火一直不停当地居民抱怨形势趋于严峻起来</p>
    </div>

---

>>浮动的特性：

1）浮动的块级元素具有包裹性：
  必须是块级元素，并且这个块级元素没有明确的设置尺寸
  如果一个块级元素的width没有设置，它的宽度就是父元素的宽度的100%。如果此时让它浮动了，它的宽度由内容来决定，尽可能地压缩空间。这就是块级元素浮动所产生的包裹性。
  里面有多少内容，它的宽度就是多少

2）浮动具有破坏性：
  破坏了流式布局，可以让块级元素并排显示
  在CSS3中，提出更好的一种布局方案，叫flex布局。在移动端开发，可以使用flex来代替浮动布局

3）浮动元素仍然受父元素的控制:
当父元素的宽度变小时，浮动的元素也会换行，但是它不可以浮动到父元素的外面。也就是说浮动元素仍然受父元素的控制

4)浮动元素的贴靠性：
  当元素向同一个元素靠近时
  浮动元素超出父元素的高度，也会对后面的元素造成影响：
如果浮动元素超出父元素的高度，后面的元素也会造成影响。

---

>>浮动造成的影响：
1）对父元素造成影响：造成父元素的高度塌陷
2）对后面的兄弟元素造成影响

解决对父元素造成的影响：
1）加高法：给父元素设置固定的高度
2）overflow：hidden的副作用，强制浏览器计算父元素的高度
   overflow：本意是用来处理溢出的
      hidden 溢出的内容会被隐藏掉
      scroll 溢出内容会产生滚动条可以看到全部内容
      visible 默认值 表示溢出内容正常显示
【溢出的内容不占网站的空间】

解决对后面的兄弟元素造成影响：
1）clear：解决对兄弟元素造成影响，谁受影响就在谁身上加clear
   clear取值：
    left：清除左浮动造成的影响；代表后面的元素也不受影响。只能清楚左浮动所造成的影响，不能清除其他浮动造成的影响
    right：清除右浮动所造成的影响。只对右浮动有效
    both：平常开发中都用both
    none：默认值，表示不清除这种影响
【
注意点：
    一个浮动的元素只能影响它后面的元素，前面的元素是影响不到的
    一个块级元素没有浮动，它肯定会独占一行的
    clear只能作用域块级元素，对于行内元素是没有效果的
】

---

clear解决父元素高度塌陷问题：
加高法或overflow：hidden都不是专业来清除浮动造成的影响的，专业的就一个，就是clear：both

使用clear清除对父元素造成的影响（内墙法）
1）给父元素添加一个子元素，该子元素不浮动，添加到最后
2）给这个元素加上clear：both

---

总结清除浮动所造成的影响：
1）加高法
缺点：只能清除对父元素造成的影响，并且高度是固定死的
2）overflow：hidden
缺点：不专业，需要注意有时子元素的高度是在超出父元素的，超出的部分就会被隐藏掉
3）clear：both
优点：可以清楚对父元素和兄弟元素造成的影响
缺点：想要清除对父元素造成的影响 需要多加一个标签 （内墙法）

真实开发中，我们会使用一个after伪元素来清除浮动：
  伪类选择器：伪类 不存在的一个类
  伪元素：页面中不存在的一个元素

after伪元素：
.father：after 表示在father内部的最后面添加一个元素

	.father：after{
					content：“hello”
	}

创建出来的伪元素默认并不是块级的，clear只能作用块级元素，所以说需要给伪元素添加一个dispaly：block的属性
提炼出一个清除浮动的类：

clearfic:after{
			content:
			clear:both;
			display:block;
			overflow:hidden;
			height:
/*兼容IE浏览器*/
.cllearfix:{
		*zoom 1
		}
		

浮动的应用场景：
1）页面中的左右结构：
  实现：
    父元素：.clearfix
    左 float：left
    右 float：right
2）页面中的多列结构
  实现：
    父元素 .clearfix
       第一列 float：left
       第二列：……
    每一列中间的间隙 margin-right
【中间1px边框问题】
3）左侧固定宽度，右侧自适应
  实现：
    父元素：当父元素的宽度变化时，那么右侧的宽度也跟着变化
    左侧 宽度必须浮动
    右侧 margin-left
4） 页面中的左中右结构：
  实现：
    父元素： 不需要清除浮动
    左：左浮动
    中 text-align：center margin：0 auto
    右：右浮动