CSS是构建网页布局的基础。其中，浮动和BFC两个概念都可以用来控制元素的位置和布局。在本文中，我们将详细介绍这两个概念的含义、作用和使用方法，并提供示例代码。
浮动
浮动是一种让元素脱离文档流并向左或右移动的布局方式。浮动的主要作用是实现文字环绕图片或其他元素的效果。但是，如果使用不当，浮动也可能会导致页面布局混乱或出现意外问题。
使用方法
使用浮动需要设置元素的float属性为left或right。例如，以下代码会将图片向左浮动：
img {
float: left;
}注意事项
- 浮动元素脱离了文档流，可能导致父元素高度塌陷。为了避免这种情况，可以给父元素添加
overflow:auto或clear:both属性。 - 浮动元素默认是块级元素，但可以通过设置
display属性改为行内块级元素。 - 浮动元素会影响后面元素的布局，需要小心使用。
BFC
BFC全称为Block Formatting Context（块级格式化上下文），它是一个独立的渲染区域，可以用来解决浮动元素带来的布局问题。BFC具有以下特性：
- BFC中的元素垂直方向上会形成一个封闭的空间，并且不会影响到外部元素。
- BFC中的元素会按照规定的方式排列，不会受到浮动元素的影响。
- BFC中的两个相邻元素之间的垂直边距会发生重叠。
使用方法
创建BFC有多种方式，常见的有以下几种：
- 给元素设置
float、position: absolute或display: inline-block属性； - 给元素设置
overflow为非visible值，如auto或hidden。
例如，以下代码会创建一个包含两个浮动元素的BFC：
<div class="container"> <div class="left">左侧内容</div> <div class="right">右侧内容</div> <div class="clear"></div> </div>
-- -------------------- ---- ------- ---------- - --------- ------- -- ----- -- - ----- - ------ ----- ------ ---- - ------ - ------ ------ ------ ---- - ------ - ------ ----- -
注意事项
- 如果一个元素创建了BFC，则其所有子元素都在同一个BFC中，因此也无法影响到外部元素。
- 使用BFC可以避免一些常见的布局问题，如浮动元素引起的高度塌陷和边距重叠等。
示例代码
为了更好地理解浮动和BFC的使用方法，以下是一个简单的示例代码。该代码实现了左侧固定宽度、右侧自适应宽度的两栏布局，并避免了浮动元素带来的高度塌陷问题。
<div class="container"> <div class="left">左侧内容</div> <div class="right">右侧内容</div> <div class="clear"></div> </div>
-- -------------------- ---- ------- ---------- - --------- ------- -- ----- -- - ----- - ------ ----- ------ ------ ----------------- ----- - ------ - ------------ ------ -- --- - ---------------------------------------------------------- -------- --------------------------------------------------------------------------------