这种div高度自适应确定你知道吗?

1. 随子元素div高度自适应

如何下面的child1和child2浮动，parent高度就会为0，前提child1和child2都有高度，如果你想parent的高度自适应，请继续阅读

• 样式省略

方法1

.parent{
    overflow:hidden;
}

方法2

• 会使用到伪元素：after,如果不懂请看伪元素

.parent:after{
    content: " ";
    height: 0;
    display: block;
    clear: both;
    visibility: hidden;
}

---

2. 根据div宽度的百分比调整div高度

假设我的div宽度会自动变化,但是我的高度只想设置成div宽度的一半,该如何实现呢?

• 设置main的高度为宽度的一半

.main:after{
    display: block;
    content: ' ';
    padding-top: 50%;
    border: 1px solid black;/*便于看出div的效果*/
}