css学习中遇到的一些问题

css重点分为三个部分：选择器 盒子模型 浮动和定位

1.浮动和定位

我觉得浮动主要是实现环绕而定位实现了堆叠。

一个浮动的元素位置的判断由上一个元素决定，如果上一个元素是标准流中的元素，那么浮动元素相对的垂直位置不会改变（顶部与上一个元素底部对齐），如果上一个元素是浮动的，则跟随在上一个元素后面，一行放不下则会被挤到下一行。

1）关于文本浮动时文字环绕却未被掩盖
W3C早期规定浮动即是为了文字环绕，float:left理解为“将元素放置在容器左侧，并将右侧所有内容都环绕显示”，浮动虽然脱离了文档流，但不像绝对定位一样将元素彻底从文档流中删除，它依旧会影响布局。
而想解决文本环绕的方法也很简单，让盒子触发BFC[^1]，则不会占用浮动元素的位置。
补充：float没有center属性，实现图片居中：添加伪元素，使其向左向右浮动，宽度取图片的一半，最后图片放置在伪元素所占据的位置中。
2）清除浮动
当容器不设置高度且子元素浮动时，会引起高度塌陷。
一般来说，清除浮动会用以下几种方式：

1.给父级定义height属性

这种做法高度不能确定。

2.最后一个浮动元素后添加空标签，添加clear:both样式

clear:left意味着不允许这个元素左边出现浮动元素。
但这种做法会添加大量无意义元素结构。

3.给父级元素添加overflow:hidden/auto

BFC布局规则下，为了BFC内部元素不影响外界布局的封闭性，浮动元素也会被父级计算高度，这样就实现了清除浮动。

overflow:hidden本身意思是溢出元素隐藏显示，存在缺点。

4.使用伪元素after

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

添加伪类的方式与第二种方式异曲同工，利用伪类向浮动元素的父盒子后添加了一个块级元素。

伪元素，如其名字，即创建了一个虚假的元素，并插入到目标元素内容之前或之后，伪元素没有“content”属性，伪元素是无用的。至少将content属性设置为空。
插入的内容在页面源码里不可见，仅在css里可见，与此同时，插入的元素默认情况下是内联元素，因此，如果想要设置高度，边距等，需要定义其为块级元素。
css继承规则适用于插入的元素，因此伪元素也会继承。
那么，对于before，after之前之后的定义究竟是什么
直觉上是插入的内容被注入目标元素的前或后，但实际上，注入的元素是有关联的目标元素的子元素，但他会被置于这个元素的任何内容的“前”或“后”。##

3）
[^1]BFC即块级规格化上下文的缩写，按照普通块级方式定位渲染，具有BFC特性的元素是一个独立的布局环境，不受外界影响。
触发BFC的机制：
浮动元素，除了float:none
绝对定位元素，已经脱离普通流，优先级高于BFC规则
display为inline-block、table-cell、flex、table-caption、inline-flex
overflow除了visible以外的值。