css如何使用float实现多栏布局
这篇文章主要介绍了css如何使用float实现多栏布局，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
创新互联主打移动网站、成都网站制作、做网站、网站改版、网络推广、网站维护、国际域名空间、等互联网信息服务，为各行业提供服务。在技术实力的保障下，我们为客户承诺稳定，放心的服务，根据网站的内容与功能再决定采用什么样的设计。最后，要实现符合网站需求的内容、功能与设计，我们还会规划稳定安全的技术方案做保障。
假如把下面的三个div显示在同一行
1
2
3
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实现多栏布局”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!
当前标题：css如何使用float实现多栏布局
网站URL：http://cdxtjz.cn/article/ihgshj.html
