块状元素这么霸道都是独占一行，如果现在我们想让两个块状元素并排显示，怎么办呢？不要着急，设置元素浮动就可以实现这一愿望。
任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动，如 div、p、table、img 等元素都可以被定义为浮动。如下代码可以实现两个 div 元素一行显示。
div{
width:200px;
height:200px;
border:2px red solid; float:left;}
<div id="div1"></div>
<div id="div2"></div>效果图
当然你也可以同时设置两个元素右浮动也可以实现一行显示。
div{
width:200px;
height:200px;
border:2px red solid;
float:right;
}效果图
又有小伙伴问了，设置两个元素一左一右可以实现一行显示吗？当然可以：
div{
width:200px;
height:200px;
border:2px red solid;
}
#div1{float:left;}
#div2{float:right;}效果图
练习
新建示例页面demo.html，示例代码如下
我也来试试，在示例页面代码中试一试使两个栏目并排显示出来且两个栏目都是左对齐。
1、在示例页面代码中的第 11 行输入下面代码：
float:left;
示例代码
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>浮动模型</title>
<style type="text/css">
div{
border:2px red solid;
width:200px;
height:400px;
}
</style>
</head>
<body>
<div id="div1">栏目1</div>
<div id="div2">栏目2</div>
</body>
</html>
此文章本站原创，地址 https://www.vxzsk.com/1410.html
转载请注明出处！谢谢！
感觉本站内容不错，读后有收获？小额赞助,鼓励网站分享出更好的教程
上一篇：10.2、CSS流动模型（二）
下一篇：10.4、CSS什么是层模型？
^