都知道float会脱离文档流 用什么办法撑开父元素呢? 手动在本区块的所有float元素之后加上一个块元素并对其添加clear:both
可以 但是这样还要再去修改html页面 而且多了一个仅仅是为了控制布局却没有实际表现意义的元素 不好..
将float的父元素也设定为float 这样会导致更深的问题
将父元素设为overflow:hidden 很不错的办法 推荐! 但是我希望内部的元素能够超出 怎么弄呢?
用伪类!只需要修改css 就能向html中添加一个元素啦!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> <style type="text/css"> .root{ margin: 0 auto; margin-top: 20px; margin-bottom: 50px; } .pos{ } .fl{ width: 300px; height: 200px; float: left; background-color: lime; } .fl2{ background-color: black; } .pos:after{ /*这四个属性缺一不可*/ content: ‘.‘; visibility: hidden; clear: both; display: block; } </style> </head> <body> <div class=‘root‘> <div class=‘pos‘> <div class=‘fl‘></div> <div class=‘fl fl2‘></div> </div> </div> </body> </html>
原文:http://www.cnblogs.com/cart55free99/p/3611650.html