都知道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{ /*这5个属性缺一不可*/ content: '.'; visibility: hidden; clear: both; display: block; height: 0px; /*如果没有这个 容器会比float元素行多出一行字的高度*/ } </style> </head> <body> <div class='root'> <div class='pos'> <div class='fl'></div> <div class='fl fl2'></div> </div> </div> </body> </html>