HTML元素的分类

1. 块级元素

如<div>、<p>、<h1>到<h6>、<ol>、<ul>等通常会独占一行。特点:会扩展以填充其父元素的整个宽度，后续的元素会出现在它们下方的新行上。

1. 行内元素 ：

这些元素不会独占一行，它们的宽度和高度由内容决定，并且会排列在同一行上，直到一行排满后才会换行。常见的行内元素包括<span>、<a>、<img>、<strong>、<em>等

1. 行内块级元素 ：

行内块级元素结合了行内元素和块级元素的特点。它们既可以设置宽度和高度，又不会新起一行，而是排列在同一行内。行内块级元素之间会保留空白符（空格、换行等）的间隙。通过CSS的display: inline-block属性将元素设置为行内块级元素是常见的做法

浮动布局

在Web页面开发中，元素的布局是一个基础且重要的概念，块级元素并通过float: left;属性来改变其布局行为，是CSS中一个常用的技术。比如以下的界面，添加float：left可以使他脱离文档流，但是和普通脱离文档流方式不同的是他能实现文字环绕效果，不会覆盖文字。

• 操作前页面：
• 直接通过绝对定位导致的覆盖效果

• 使用float：left实现的文字环绕效果

面试常考：块级元素的同行方法

• 问：如何使如下列表排列到一行

1. 使用浮动 可直接在item中添加float,让块级元素水平排列

面试：在这里可以使用 margin: 0 auto 来居中显示吗？

回答这个问题我们首先需要理解float的性质和auto工作的原理。

1. 当元素被设置为浮动时，它们会从常规文档流中脱离
2. auto 通过自动分配左右外边距（margin）来实现，但前提是元素必须有一个明确的宽度，并且处于常规文档流中。
3. 因为浮动元素不再占据文档流中的空间，因此，基于文档流宽度的 margin: 0 auto; 居中机制不再适用。

• 答：不能，因为auto执行原理是根据左右外边距（margin）来实现的居中显示，但是浮动元素脱离了文档流，不再占据文档流中的空间，所以居中机制不再适用

1. 直接设置display 将块级元素的display属性设置为inline-block，这样元素就会像行内元素一样并排显示，但同时又保留了块级元素的一些特性，如可以设置宽度和高度。实际上将块级元素变成了行内块

   display: inline-block;

在上面的图片中大家可以观察到排列在一起后留有缝隙，这些缝隙正是行内块自带的，因为行内块级元素之间会保留空白符，空格、换行等的间隙。

为了消除这些缝隙，我们可以直接在css中设置 font-size 消除缝隙。

 ul {
        font-size: 0;
    }

    li {
        font-size: 16px;
    }

• 消除效果如下：

面试：清除浮动（解决高度塌陷问题）

在使用浮动布局时，因为脱离文档流，导致子容器无法撑开父容器的高度，导致了父容器高度塌陷的问题在页面开发中这会导致许多的布局影响。在上文中因为使用了float浮动布局，所以ul显示为0。

那么，将ul的高度恢复，使得子容器能够撑开他，我们一般有以下方法：

1. 直接设置

在页面开发中直接设置父元素的高度是恢复父容器高度的一种方法，但是这是最low的一种方法，非常的不优雅。如果有100个这样的容器你要一个个去设置吗？而且在开发过程中有许多容器的高度我们也不知道高度，写多少也不知道。

1. clear:both

在CSS中，我们可以使用clear: both来恢复float带来的影响。

我们首先设置一个li为其设置一个类名clear，之后在css中清除浮动对元素左右带来的影响

.clear {
        clear: both;
    } 

1. 伪元素

使用伪元素处理浮动的副作用是很常见的方式。我们需要在发生浮动的容器上添加伪元素 ::after，为他添加以下执行步骤，我们需要添加一个 content 属性，遵循以下版本的书写规范。

ul::after {
    content: "";
    /* 必需的，因为伪元素需要content来实际生成 */
    display: block;
    /* 或者 display: table */
    clear: both;
    /* 清除左右两边的浮动 */  
}

1. 把父容器设置为BFC容器

把父容器设置为BFC容器是清除浮动最常见的方法。 在CSS中，一旦一个元素成为了BFC的容器，它就能够包含并正确地处理其内部的浮动元素，从而避免了父容器高度塌陷的问题。 为父容器ul加上overflow: hidden 或者overflow: auto是创建BFC的一种方式。