解决父元素高度塌陷的2种方法

来源：互联网发布：centos php版本切换编辑：程序博客网时间：2024/05/21 14:56

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>        section{            background: gray;        }        article{            width: 50%;            float: left;        }    </style></head><body>    <section>        <article>            <img src="img/test.jpg"width="100px" alt="aa">            <h2>蓝鸡腿</h2>            <p>穷爸爸:"你要好好学习,以后就能找一份好工作养活自己。"驱动学习的力量是恐惧</p>        </article>        <article>            <img src="img/test.jpg"width="100px" alt="aa">            <h2>红鸡腿</h2>            <p>富爸爸:"你要好好学习,以后就能开自己的公司，"驱动力量是爱</p>        </article>    </section></body></html>

//////////////////////////////////////

会发现 子元素浮动后 背景不见了，因为父元素的高度没了

解决方法1:父元素添加  overflow: hidden; 属性

2: 父元素添加

        section::after{                    content: "";                    display: table;                    clear: both;                }

阅读全文

0 0