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实现多栏布局"这篇文章对大家有帮助，同时也希望大家多多支持，关注行业资讯频道，更多相关知识等着你来学习!