面试题:如何清浮动
给浮动元素的父元素手动添加一个固定的高度(不推荐）
给浮动元素的父元素设置overflow:hidden/auto
.在浮动元素的父元素结束标签之前加一个具有块元素特点的标签(我们一般用 div),给元素加一个clear:both<divstyle=clear:both"></div>
clearfix去清除浮动
[clear清除浮动] clear:both不允许左右两边有浮动对象(清除左石两边浮动的影响) clear:left不允许左边有浮动对象(清除左边浮动的影啊) clear:right不允许石边有浮动对象(清除右边浮动的影啊) clear:none允许左右两边有浮动对象默认值(不清除左右两边浮动的影响)
1 <!DOCTYPEhtml> 2 <html> 3 <head> 4 <metacharset="utf-8"> 5 <title></title> 6 <styletype="text/css"> 7 .left,.right{ 8 width:200px; 9 height:200px; 10 float:left; 11 } 12 .left{ 13 background-color:brown; 14 } 15 .right{ 16 background-color:cornflowerblue; 17 } 18 .hrader{ 19 border:10pxsolidred; 20 overflow:auto; 21 background-color:#333333 22 } 23 </style> 24 </head> 25 <body> 26 <divclass="hrader"> 27 <divclass="left"></div> 28 <divclass="right"></div> 29 <!--<divstyle="clear:both;"></div> 30 <spanstyle="display:block;clear:both;"></span>--> 31 </div> 32 </body> 33 </html>