标签:最小 元素 位置 nbsp orm body 技术 context play
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .box{ height:200px; border:1px solid red; } .item{ width:200px; height:200px; background-color: black; float:left; } </style> </head> <body> <div class="box"> <div class="item"></div> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .box{ float: left; border:1px solid red; } .item{ width:200px; height:200px; background-color: black; float:left; } </style> </head> <body> <div class="box"> <div class="item"></div> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .box{ display: inline-block; border:1px solid red; } .item{ width:200px; height:200px; background-color: black; float:left; } </style> </head> <body> <div class="box"> <div class="item"></div> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .box{ border:1px solid red; } .item{ width:200px; height:200px; background-color: black; float:left; } .clearfix{ clear:both; } </style> </head> <body> <div class="box"> <div class="item"></div> <div class="clearfix"></div> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .box{ border:1px solid red; } .item{ width:200px; height:200px; background-color: black; float:left; } </style> </head> <body> <div class="box"> <div class="item"></div> <br clear="all"/> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .box{ border:1px solid red; } .item{ width:200px; height:200px; background-color: black; float:left; } .clearfix{ *zoom:1; } .clearfix:after{ content:" "; display: block; clear:both; } /* * after伪类:元素内部末尾添加内容; * :after{ //IE6,IE7下不兼容 * content:"添加的内容"; * } * zoom:缩放 * 触发IE下haslayout,使元素根据自身neir计算宽高 * FF不支持 */ </style> </head> <body> <div class="box clearfix"> <div class="item"></div> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> /*清除浮动:清除浮动元素的父级*/ .box{ border:1px solid red; overflow: hidden; } .item{ width:200px; height:200px; background-color: black; float:left; } </style> </head> <body> <div class="box"> <div class="item"></div> </div> </body> </html>
标签:最小 元素 位置 nbsp orm body 技术 context play
原文地址:http://www.cnblogs.com/web-Knowledge/p/7096798.html