解决:父级元素不能被子元素内容撑开的解决办法…
2019-01-15 07:01:42来源:博客园 阅读 ()
问题
父级元素不能被子元素内容撑开的解决办法,父级元素没有高度的解决办法。
今天在写网页时遇到如下图问题,解决问题后自己做个随笔,希望帮到更多的学前端的童鞋!
问题图片
问题描述
最外层的父级元素不能自适应高度-不能随对象撑开没有高度
当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个是由于浮动产生原因。
解决方法
一、
在父元素里最底部加上一个clear清除浮动的标签(无需内容),并设置clear: both;
HTML
1 <article> 2 <aside></aside> 3 <section></section> 4 <div class="clear"></div> 5 </article>
CSS
1 <style> 2 article{ width: 1000px;margin: 0 auto;border: 5px dashed red; } 3 aside{ width: 300px;height: 400px;background: aqua;float: left; } 4 section{ width: 600px;height: 400px;background: bisque;float: right; } 5 .clear{ clear: both; } 6 </style>
页面效果
二、
直接给父元素加上伪对象选择符(::after),意思就是在父元素后面添加清除浮动属性。
HTML
1 <article> 2 <aside></aside> 3 <section></section> 4 </article>
CSS
1 <style> 2 article{ width: 1000px;margin: 0 auto;border: 5px dashed red; } 3 aside{ width: 300px;height: 400px;background: aqua;float: left; } 4 section{ width: 600px;height: 400px;background: bisque;float: right; } 5 article::after{ content: '';display: block;clear: both; } 6 </style>
页面效果
简单解决了问题,如有不足之处,请多多指教!
文章乃参考、转载其他博客所得,仅供自己学习作笔记使用!!!
原文链接:https://www.cnblogs.com/Y1473/p/10267264.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
下一篇:js 3D旋转效果
- 前端CSS五中元素定位类型 2020-06-01
- css设置overflow:hiden行内元素会发生偏移的现象 2020-05-09
- CSS的 行内元素 和 块类元素 2020-05-06
- 相邻元素margin的自动合并与float的坑 2020-04-30
- 解决微信小程序引用echarts视图模糊的问题 2020-04-24
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash