二、浮动模型
块状元素这么霸道都是独占一行，如果现在我们想让两个块状元素并排显示，怎么办呢？不要着急，设置元素浮动就可以实现这一愿望。
任何元素在默认情况下是不能浮动的，但可以通过float属性将元素定义为浮动，如 div、p、table、img 等元素都可以被定义为浮动。通过下面代码实现两个 div 元素在一行显示。
<style type="text/css">
div{
width: 200px;
height: 200px;
border: 1px solid blue;
float: left;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
页面显示结果：
如果将样式中的float值改为right，则页面显示的结果为：
小伙伴可能会问，设置两个元素一左一右可以实现一行显示吗？当然可以啦
只需要将代码修改如下：
<style type="text/css">
div{
width: 200px;
height: 200px;
border: 1px solid blue;
}
#div1{
float: left;
}
#div2{
float: right;
}
</style>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
</body>
显示的结果如下：
扫一扫
2263
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
