css浮动制作

使用CSS浮动制作布局

浮动（float）是CSS中一种传统的布局方式，常用于实现多栏布局、图文混排等效果。通过设置元素的浮动属性，可以让元素脱离标准文档流，并向左或向右移动，直到碰到父容器或另一个浮动元素。

基本语法

.element {
    float: left | right | none | inherit;
}

• left：元素向左浮动。
• right：元素向右浮动。
• none：默认值，元素不浮动。
• inherit：继承父元素的浮动属性。

实现两栏布局

<div class="container">
    <div class="left-column">左侧内容</div>
    <div class="right-column">右侧内容</div>
</div>

.left-column {
    float: left;
    width: 30%;
    background-color: #f0f0f0;
}

.right-column {
    float: right;
    width: 70%;
    background-color: #e0e0e0;
}

.container::after {
    content: "";
    display: table;
    clear: both;
}

清除浮动

浮动元素会脱离文档流，可能导致父容器高度塌陷。常见的清除浮动方法：

1. 使用clear属性
   在浮动元素后添加一个空元素并设置clear: both;。

<div class="float-left"></div>
<div class="float-right"></div>
<div style="clear: both;"></div>

1. 使用伪元素清除浮动
   更推荐的方式是通过父容器的伪元素清除浮动。

.container::after {
    content: "";
    display: table;
    clear: both;
}

1. 使用overflow属性
   为父容器设置overflow: auto;或overflow: hidden;。

.container {
    overflow: hidden;
}

图文混排示例

<div class="article">
    <img src="image.jpg" alt="示例图片" class="float-image">
    <p>这里是围绕图片的文本内容...</p>
</div>

.float-image {
    float: left;
    margin-right: 15px;
    margin-bottom: 10px;
    width: 200px;
}

注意事项

• 浮动元素会脱离文档流，可能影响其他元素的布局。
• 父容器高度塌陷时，需使用清除浮动技术。
• 现代布局中，Flexbox和Grid逐渐替代浮动，但在某些场景下浮动仍有用武之地。

替代方案

对于更复杂的布局，推荐使用Flexbox或CSS Grid：

1. Flexbox
   适合一维布局（行或列）。

.container {
    display: flex;
}

1. CSS Grid
   适合二维布局（行和列）。

.container {
    display: grid;
    grid-template-columns: 30% 70%;
}