css中float用法
css属性应用应用float属性更改文档流方式
操作方法
- 01
正确编写html文件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>新建网页</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="#" /> </head> <body> <div>这个浮动在左边</div> <div>这个浮动在右边</div> </body> </html>
- 02
<style> .div1{ width:100px; height:100px; float: left; background: white; } .div2{ width: 100px; height: 100px; background: red; float:right; } </style> 然后加入css样式中的浮动等
- 03
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>新建网页</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="#" /> <style> .div1{ width:100px; height:100px; float: left; background: white; } .div2{ width: 100px; height: 100px; background: red; float:right; } </style> </head> <body> <div>这个浮动在左边</div> <div>这个浮动在右边</div> </body> </html> 完整格式可以试一试效果