Home >Web Front-end >HTML Tutorial >使用float属性布局时父元素高度不能自适应的解决方法_html/css_WEB-ITnose
使用float属性布局时父元素高度不能自适应的解决方法_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:28:391660browse
在网页的布局过程中，经常会用到float属性来实现页面的左右布局，但是有个问题就是父元素的高度并不能根据子元素的高度自适应。比如下面这段代码：
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>title</title></head><body> <div align="center" style="border: 1px solid blue;"> p <div style="float:left;width:45%;height:200px;border: 1px solid green;"> left </div> <div style="float:right;width:45%;height:150px;border: 1px solid red;">right</div> </div></body></html>
在浏览器中查看效果如下：
在有些情况下，我们需要父元素能够根据子元素的高度进行自适应，这时候你只需要给父div加个overflow:hidden就可以了。譬如：
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>title</title></head><body> <div align="center" style="border: 1px solid blue;overflow:hidden;"> p <div style="float:left;width:45%;height:200px;border: 1px solid green;"> left </div> <div style="float:right;width:45%;height:150px;border: 1px solid red;">right</div> </div></body></html>
这样父元素的高度就能根据子元素的高度自适应了。在浏览器中查看效果如下：
Statement：
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
Previous article：W3School-CSS 伪元素 (Pseudo-elements) 实例_html/css_WEB-ITnoseNext article：纯css3手机页面图标样式代码_html/css_WEB-ITnose