Day4课程 1-课程介绍 + 标准流、浮动

Day4课程 1-课程介绍 + 标准流、浮动

标准流、浮动、flex布局

标准流

也叫文档流。指的是标签在页面中 默认的 排布规律，例如：块元素独占一行，行内元素可以一行显示多个。


☆ 今日课程目的：让块级显示模式的盒子在一行内显示（两种选择：浮动（了解）、flex布局）

---

浮动（了解）

总结：

○ 浮动属性 float,  left / right 左右浮动
○ 特点
   ● 浮动后的盒子顶对齐
   ● 浮动后的盒子具备行内块特点
   ● 父级宽度不够，浮动的子级会换行
   ● 浮动后的盒子脱标（脱离标准流的控制）（浮动盒子的脱标现象，所以用了浮动就得都用上浮动）
○ 清除浮动
   ● 概念：子级浮动，父级没有高度，子级无法撑开父级高度，影响布局效果
   ● 默认地都将对应的选择器类名都写作clearfix
   ● 清除的方法：在父元素内容的最后添加一个块级元素
      1. 额外标签法：了解即可。设置CSS属性 clear: both
      单/双伪元素法为额外标签法的改良版。可以在网页制作的准备工作时和其他的清除默认样式的代码一起写好，或者发现有问题了把这个部分补充上去，并且直接粘贴下述的代码即可。两种伪元素法↓
      2. 单伪元素法

.clearfix::after {
	content: ""; 
	display: block; 
	clear: both;
}

      3. 双伪元素法（推荐）：
         其中 ::before 伪元素是用来解决外边距塌陷的问题的

.clearfix::before,
.clearfix::after {
	content: "";
	display: table;
}

.clearfix::after {
	clear: both;
}

      4. overflow（最简单的一个）：父级元素添加 CSS 属性 overflow: hidden（溢出隐藏）

○ 拓展：浮动本质作用是实现图文混排效果

（弹幕区：

1. 为什么加了before就能解决塌陷问题呢？
   因為::before加入的塊級偽元素會插入到所有子級元素的前面，阻擋子級元素和父級元素的直接接觸
2. 溢出隐藏 能解决 浮动脱标问题 的原理：通俗一点就是BFC会强制将悬浮的按下来，重叠的分开来

）