<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JSONP 实例</title> </head> <style type="text/css"> .content{ margin: 0 auto; 960px; background-color: gray; zoom: 1; } .content:after { content: ""; display: block; visibility: hidden; clear: both;height: 10px;background-color: blue; 100% ;clear: both;} .left{ float: left; height: 100% } .corner1{ background-color: red; margin-left: 100px; 20%; } .corner2{ background-color: yellow; 40%; } </style> <body> <div class="content"> <div class="left corner1">123<br/>123<br/>1234123<br/>123<br/>1234123<br/>123<br/>1234123<br/>123<br/>1234123<br/>123<br/>1234123<br/>123<br/>1234 我是好人<br/> 我是好人2<br/></div> <div class="left corner2">123<br/>123<br/>1234123<br/>123<br/>1234123<br/>123<br/>1234123<br/>123<br/>1234123<br/>123<br/>1234123<br/>123<br/>1234 我是好人<br/> 我是好人2<br/> 我是好人<br/> 我是好人2<br/> </div> </div> </body> </html>
/*在写HTML代码的时候,发现在Firefox等符合W3C标准的浏览器中,如果有一个DIV作为外部容器,内部的DIV如果设置了float样式,则外部的容器DIV因为内部没有clear,导致不能被撑开。
/*这个clearfix的CSS使用了after这个伪对象,它将在应用clearfix的元素的结尾添加content中的内容。在这里添加了一个句号".",并且把它的display设置成block;高度设为0;clear设为both;visibility设为隐藏。这样就达到了撑开容器的目的啦。*/
/*这些东西的原理,就是让脱离文档流的元素回归到流当中,并且做一些浏览器的兼容*/
/*用after before的伪元素,需要给一个content但这个元素又不能被看到,所以就有了visibility: hidden; 和 height:0*/