CSS

一、布局

1.BFC（块格式化上下文）

一个新的 display 属性的值，它可以创建无副作用的BFC。在父级块中使用 display: flow-root 可以创建新的BFC。同一个BFC中的块元素的margin会融合，反之不会。

（1）内联元素和块级元素的主要区别

修订-行内元素：padding设置上下左右都有效，即会撑大空间

（2）行内块状元素：

(1)不自动换行
(2)能够识别宽高
(3)默认排列方式为从左到右

（3）按字母顺序排列的主要块级元素

（4） 按字母顺序排列的主要块级元素

< input >和< img >都是行内元素，但是它们是可以设置宽和高的。

2.clear：https://developer.mozilla.org/zh-CN/docs/Web/CSS/clear

要想阻止行框围绕浮动框，需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。
当应用于非浮动块时，它将非浮动块的边框边界移动到所有相关浮动元素外边界的下方。这个非浮动块的垂直外边距会折叠。

另一方面，两个浮动元素的垂直外边距将不会折叠。当应用于浮动元素时，它将元素的外边界移动到所有相关的浮动元素外边框边界的下方。这会影响后面浮动元素的布局，后面的浮动元素的位置无法高于它之前的元素。

要被清除的相关浮动元素指的是在相同块级格式化上下文中的前置浮动。
如果一个元素里只有浮动元素，那它的高度会是0。如果你想要它自适应即包含所有浮动元素，那你需要清除它的子元素。一种方法叫做clearfix，即clear一个不浮动的 ::after 伪元素。

3.display

（1）display-inside

元素使用流布局（块和内联布局）布局其内容。
如果其外部显示类型是内联或插入，并且它参与了块或内联格式化上下文，则它将生成一个内联框。 否则，它将生成一个块容器框。
根据其他属性的值（例如position，float或overflow）以及它本身是参与块还是内联格式设置上下文，它要么为其内容建立新的块格式设置上下文（BFC），要么将其内容集成到 其父格式上下文。

（2）

4.Flex

设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效.
Flex属性值