12-4浮动模型 · 初识HTML+CSS

块状元素这么霸道都是独占一行，如果现在我们想让两个块状元素并排显示，怎么办呢？不要着急，设置元素浮动就可以实现这一愿望。任何元素在默认情况下是不能浮动的，但可以用 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> ~~~ 效果图 [![](http://img.mukewang.com/540e62c60001c56a06760417.jpg)](http://img.mukewang.com/540e62c60001c56a06760417.jpg) 当然你也可以同时设置两个元素右浮动也可以实现一行显示。 ~~~ div{ width:200px; height:200px; border:2px red solid; float:right; } ~~~ 效果图 [![](http://img.mukewang.com/540e632b0001f5f506760417.jpg)](http://img.mukewang.com/540e632b0001f5f506760417.jpg) 又有小伙伴问了，设置两个元素一左一右可以实现一行显示吗？当然可以： ~~~ div{ width:200px; height:200px; border:2px red solid; } #div1{float:left;} #div2{float:right;} ~~~ 效果图 [![](http://img.mukewang.com/540e63b50001f6a206760417.jpg)](http://img.mukewang.com/540e63b50001f6a206760417.jpg) ### 任务 **我也来试试，在右侧的代码编辑器中试一试使两个栏目并排显示出来且两个栏目都是左对齐。** 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> ```