{site_name}

{site_name}

🌜 搜索

CSS浮动是一种布局技术,它可以让元素相对于其容器左浮动或右浮动

前端 𝄐 0
css浮动的用法,css中浮动的定义,css语言中浮动的语法,css浮动属性float详解,css浮动方式,css浮动怎么用
CSS浮动是一种布局技术,它可以让元素相对于其容器左浮动或右浮动。浮动的元素会脱离文档流,并且会影响周围元素的位置和排列方式。

例如,如果一个段落元素设置了左浮动,那么它将向左移动并尝试靠近其容器的左侧边缘。其他元素将围绕它进行布局,直到不再碰撞为止。

下面是一个简单的CSS浮动示例:

html
<div class="container">
<div class="box1">Box 1</div>
<div class="box2">Box 2</div>
<div class="box3">Box 3</div>
</div>


css
.container {
border: 1px solid black;
overflow: auto;
}

.box1 {
float: left;
background-color: red;
width: 100px;
height: 100px;
}

.box2 {
background-color: green;
width: 100px;
height: 100px;
}

.box3 {
background-color: blue;
width: 100px;
height: 100px;
}


在这个示例中,.box1 左浮动,.box2 和 .box3 被推到了右边。.container 具有 overflow: auto 属性,以便正确包含浮动元素。