二、浮动模型
块状元素这么霸道都是独占一行,如果现在我们想让两个块状元素并排显示,怎么办呢?不要着急,设置元素浮动就可以实现这一愿望。
任何元素在默认情况下是不能浮动的,但可以通过float属性将元素定义为浮动,如div、p、table、img等元素都可以被定义为浮动。通过下面代码实现两个div元素在一行显示。
div{
width: 200px;
height: 200px;
border: 1px solid blue;
float: left;
}
div1
div2
页面显示结果:
如果将样式中的float值改为right,则页面显示的结果为:
小伙伴可能会问,设置两个元素一左一右可以实现一行显示吗?当然可以啦
只需要将代码修改如下:
div{
width: 200px;
height: 200px;
border: 1px solid blue;
}
#div1{
float: left;
}
#div2{
float: right;
}
div1
div2
显示的结果如下: