Home > Web Front-end > HTML Tutorial > Why is the parent div not stretched_html/css_WEB-ITnose

Why is the parent div not stretched_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:40:24
Original
1196 people have browsed it

Why the parent div is not stretched:

Under normal circumstances, if the parent object does not set a height, the child object can stretch the child object. However, if the child object floats and the float is not cleared, the parent object cannot be opened in IE8 or FF browser, but it can be opened in IE6.

Code example:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css">.parent{  border:1px solid red;  width:500px;}.first,.second{  float:left;  height:100px;  width:100px;  border:1px solid blue}</style></head><body><div class="parent">  <div class="first"></div>  <div class="second"></div></div></body></html>
Copy after login

The above code can expand the parent div under IE6, but cannot be expanded under IE8 or FF browsers. The solution is to clear the float. The code is as follows:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css">.parent{  border:1px solid red;  width:500px;  overflow:hidden}.first,.second{  float:left;  height:100px;  width:100px;  border:1px solid blue}</style></head><body><div class="parent">  <div class="first"></div>  <div class="second"></div></div></body></html>
Copy after login

The original address is: http://www.51texiao.cn/div_cssjiaocheng/2015/0519/1891.html

The original address Yes: http://www.softwhy.com/forum.php?mod=viewthread&tid=4699

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template