这篇文章主要介绍了css如何使用float实现多栏布局，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
假如把下面的三个div显示在同一行
<div id="parent"> <div id="box1">1</div> <div id="box2">2</div> <div id="box3">3</div> </div>
float实现多栏布局
float属性控制目标HTML组件是否浮动以及如何浮动。设置该属性过后，对象会被当做块组件处理。float的取值一共有四个：left（向左浮动）、Right（向右浮动）、none（不浮动）、inherit（继承父元素值），将box1,box2,box3都设置成向左浮动，浮动元素的下一个兄弟元素如果也设置了同一浮动方向，则会紧随改元素显示。
设置了float之后，元素会脱离普通文档流。它们的父元素也不会被撑开，所以#parent的高度此时为0。
#parent>div{
border:1px solid black;
float:left;
width:200px;
height:200px;
text-align: center;
}
#box1{
background-color:red;
}
#box2{
background-color:yellow;
}
#box3 {
background-color:blue;
}
我们也可以这样，将box1,box2,设置成向左浮动，box3不浮动。由于box1,box2设置了浮动之后脱离了普通文档流。对box3来说就像前面不存在box1,box2一样，box3也会显示在这一行，但是会被box1遮挡住。设置box3的 margin-left:400px;可以让它看起来像是显示在box1,box2后面。这个时候#parent被box3撑开，高度此时为202px。
#parent>div{
border:1px solid black;
width:200px;
height:200px;
text-align: center;
}
#box1{
float:left;
background-color:red;
}
#box2{
float:left;
background-color:yellow;
}
#box3 {
margin-left:400px;
background-color:blue;
}
感谢你能够认真阅读完这篇文章，希望小编分享的“css如何使用float实现多栏布局”这篇文章对大家有帮助，同时也希望大家多多支持云搜网，关注云搜网行业资讯频道，更多相关知识等着你来学习!
