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

如何下面的child1和child2浮動，parent高度就會為0，前提child1和child2都有高度，如果你想parent的高度自适應，請繼續閱讀

<body>
    <div class="parent">
        <div class="child1"></div>
        <div class="child2"></div>
    </div>
</body>

方法1

.parent{
    overflow:hidden;
}

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

假設我的div寬度會自動變化,但是我的高度隻想設定成div寬度的一半,該如何實作呢?

<body>
    <div class="main"></div>
</body>

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