HTML5第七章 浮动

一、标准文档流

block：块级元素

inline：内联元素（行内元素）

内联标签可以包含于块级标签中，成为它的子元素，而反过来则不成立

二、display属性

display:block；元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符

display:inline；内联元素的默认值。元素会被显示为内联元素，该元素前后没有换行符

display:inline-block；行内块元素，元素既具有内联元素的特性，也具有块元素的特性

display：none；设置元素不被显示

display特性

块级元素与行级元素的转变（block、inline）

控制块级元素排一行到的（inline-block）

控制元素的显示和隐藏（none）

三、浮动

浮动原理

CSS浮动是CSS布局中的一种技术，可以使元素脱离文档流，向左或向右移动，同时其周围的元素也会重新排列。

CSS浮动本质是用于实现图文环绕的效果，但后来被广泛应用于页面布局。在CSS中，任何元素都可以浮动。需要注意的是，浮动元素会脱离正常的文档流，不再占据原本的空间，同时会影响到周围元素的布局。因此，在使用浮动布局时，需要考虑到其对周围元素的影响，并及时清除浮动带来的影响。

float属性

float-left:设置左浮动

float-right:设置右浮动

边框塌陷

当块级父元素中不存在上边框、上内边距、内联元素、清除浮动等属性时，块级父元素与其第一个子元素或最后一个子元素的外边距会发生合并

四、清除浮动

clear属性

clear-left：在左侧不允许浮动元素

clear-right：在右侧不允许浮动元素

clear-both：在左、右两侧不允许浮动元素

clear-none：默认。允许浮动元素出现在两侧

五、清除浮动的方法

CSS清除浮动主要是为了解决因浮动元素脱离文档流而导致的布局问题。当我们在布局中使用浮动元素时，浮动元素不再占据原本的空间，这可能导致其父元素高度塌陷，以及其他布局上的问题。为了解决这个问题，我们需要清除浮动。

以下是几种常用的清除浮动的方法：

1. 额外标签法：在浮动元素后面添加一个额外的空标签，如<div style="clear:both;"></div>。这个空标签的clear属性设置为both，意味着它不允许两侧有浮动元素，因此它会使父元素包含浮动的高度。

2. 父级添加overflow属性：给父元素添加overflow:hidden;、overflow:auto;或overflow:scroll;。这些值都会使父元素包含浮动的高度。

3. 使用after伪元素：这是目前最流行的方法。

六、溢出处理

在CSS中，处理元素内容溢出主要有几种方法，这些方法可以通过设置元素的overflow属性来定义当内容超出元素框时应该如何处理。以下是一些常见的溢出处理方法：

1. visible（默认值）： 如果内容溢出元素框，那么内容会被显示在元素框之外。这意味着溢出内容不会被裁剪，而是会继续显示在页面上。

2. hidden： 溢出元素框的内容会被裁剪，并且其余内容是不可见的。这意味着溢出的部分将不会显示在页面上。

3. scroll： 内容会被裁剪，并且浏览器会显示滚动条以便用户能够查看剩余的内容。这意味着用户可以通过滚动来查看被裁剪的内容。

4. auto： 如果内容被裁剪，则浏览器会显示滚动条。如果没有溢出，则不会显示滚动条。这实际上是scroll和hidden的混合体，它根据是否需要显示滚动条来自动选择行为。

5. initial： 设置overflow属性为其默认值。

6. inherit： overflow属性从其父元素继承值。