div中float的用法
时间: 2023-07-09 10:34:37 浏览: 58
在 div 中使用 float 属性可以使其脱离文档流,浮动到父容器的左侧或右侧。这可以用来实现多栏布局,比如把一篇文章分成两栏或三栏等。但是需要注意的是,浮动元素会影响其后面的元素布局,可能需要进行清除浮动。具体的使用方式如下:
1. 在 CSS 中为 div 设置 float 属性,可以设置为 left 或 right;
2. 如果希望 div 不影响其后续元素的布局,需要在其后面添加一个 clear 属性,可以设置为 both、left 或 right;
3. 如果希望父容器可以自适应 div 的高度,可以在父容器 CSS 中添加一个 overflow 属性,设置为 auto 或 hidden。
示例代码如下:
```
<style>
.container {
overflow: hidden;
}
.left {
float: left;
width: 50%;
background-color: #ccc;
}
.right {
float: right;
width: 50%;
background-color: #ddd;
}
.clear {
clear: both;
}
</style>
<div class="container">
<div class="left">左侧内容</div>
<div class="right">右侧内容</div>
<div class="clear"></div>
</div>
```