Home > Article > Web Front-end > I don’t understand the description of CSS layout overflow hidden. _html/css_WEB-ITnose
I don’t understand the description of CSS layout overflow hidden. _html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:12:061139browse
The code is as follows.
82e4865872727f41d1edae4f463247d6
68ccb177a5de0ef9542dde7d35bae727
93f0f5c25f18dab9d176bd4f6de5d30e
02741e1fff959744b90781ed204b1f10
b2386ffb911b14667cb8f0f91ea547a7Untitled Document6e916e0f7d1e588d4f442bf645aedb2f
080b747a20f9163200dd0a7d304ba388
#con_t{ width: 960px; height:auto; background:#CCC scroll 0 0; margin:0 auto; padding-bottom:20px;}
#con_t .new_list{ width:250px; height:220px; border:1px #3F0 solid; float :left;}
531ac245ce3e4fe3d50054a55f265927
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
dfa581255161b5b58261fb49dd7fae33
="new_list">new_list16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
After running the code under IE7 and IE6 Show example.
Display example under IE8.0
That’s what I want to ask.
In #con_t{ width:960px; height:auto; background:#CCC scroll 0 0; margin:0 auto; padding-bottom:20px;}
Add overflow:hidden; in the future, both IE7 and IE8 will display the same The result was. Obviously overflow:hidden; is to hide the excess part. Why does this feature exist? 》
http://www.viuoo.com/a/DIV/2012_0602_114.html This is the original address. Please help me understand.
Reply to discussion (solution)
The host This is a simple way to clear floating,
<!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>无标题文档</title><style type="text/css">#con_t{ width:960px; height:auto; background:#CCC scroll 0 0; margin:0 auto; padding-bottom:20px;}#con_t .new_list{ width:250px; height:220px; border:1px #3F0 solid; float:left;}</style></head><body><div id="con_t"><div class="new_list">new_list</div><div style="clear:both;"></div></div></body></html> Details can be See
http://www.zhangxinxu.com/wordpress/2010/01/Some understanding of overflow and zoom clearing floats/
For more methods, please refer to
http://www. qianduan.net/universal-to-remove-floating-style.html
The original poster This is an easy way to clear floating,
HTML code
def3b82f343e9932dc1f82e410238a66
a44c454011f1fcfccfc5c9d0e7b44dc7
Learned, very useful
dfa581255161b5b58261fb49dd7fae33
5b84688d16de3fa918e4bc61798a5515new_list16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
56c5d33419803948326578624852419716b28748ea4df4d9c2150843fecfba68