浮动与清除浮动

浮动（float）是CSS中用于布局的重要属性，它使元素脱离正常的文档流，并向左或向右移动，直到碰到另一个浮动元素或父元素的边界。

浮动的定义和作用

• 定义：浮动是通过设置 float 属性使元素脱离正常的文档流，并移动到其父元素的最左边或最右边。

• 作用：浮动元素会生成一个块级框，任何元素都可以浮动，浮动后会使元素向左或向右移动，直到碰到包含块或另一个浮动框的边缘。块级框（block box），这意味着该元素将表现为一个块级元素，即使它原本是行内元素（如 <span> 或 <a>）。

浮动的特性

1. 脱离文档流：浮动元素不再占据文档流中的位置，但仍影响周围元素的布局。

2. 行内元素转化：浮动会将行内元素或行内块元素转化为块元素，使其可以设置宽高。

3. 一行显示：多个浮动元素可以在一行内显示，直到父元素的宽度不足时才换行。

特别的，当浮动元素设置 margin-left: -100% 时，100% 的值是相对于其父元素的宽度计算的。这是因为浮动元素的宽度和边距都是相对于其包含块（通常是父元素）计算的。

原理

1. 包含块：在CSS中，一个元素的尺寸和位置是相对于其包含块计算的。对于浮动元素，其包含块通常是其父元素。

2. 百分比值：当使用百分比值（如 100%）时，它是相对于包含块的宽度计算的。因此，margin-left: -100% 表示将元素向左移动其父元素宽度的100%。

3. 浮动元素的行为：浮动元素会脱离文档流，但其尺寸和位置仍然受包含块的影响。通过设置负边距，可以使浮动元素移动到上一行的起始位置。

清除浮动

清除浮动，是指在CSS中使用特定的方法来解决浮动元素（使用float属性的元素）对布局的影响。浮动元素会脱离文档流，这可能导致父元素的高度无法自动适应其内容，出现高度塌陷现象。

为什么需要清除浮动？

1. 高度塌陷：浮动元素的父元素无法自动伸展以包含浮动元素，导致内容溢出。

2. 布局混乱：浮动元素可能覆盖其他元素或影响布局的正常显示。

清除浮动的常用方法

1. 添加空元素法：

   • 在浮动元素后添加一个空元素，如 <div class="clear"></div>，并设置 .clear { clear: both; }。

2. 使用 overflow 属性：

   • 给浮动元素的父元素设置 overflow: hidden; 或 overflow: auto;，但注意可能出现滚动条。

3. 使用伪元素法：

   • 在父元素的CSS中添加 .parent:after { content: ''; display: block; clear: both; }。

4. 设置高度法：

   • 手动给父元素设置一个固定的高度，但不适用于高度不固定的情况。

注意，clear: both 是CSS中的一个属性，用于清除浮动元素对布局的影响。它的作用是确保元素位于其之前的所有浮动元素（无论是左浮动还是右浮动）的下方。

作用原理

1. 清除浮动影响：当一个元素设置了 clear: both 时，它会忽略之前的所有浮动元素（左浮动和右浮动），并且位于它们的下方。

2. 元素定位：通过设置 clear: both，元素会自动增加上外边距，以确保它位于之前浮动元素的下方。

3. 适用范围：clear 属性主要适用于块级元素（block元素），如果用于内联元素（inline或inline-block），则无效