CSS選擇器——僞元素選擇器之處理父元素高度及外邊距溢出

時間 2019-11-07

標籤 css 選擇器元素處理高度邊距溢出欄目 CSS 简体版

原文原文鏈接

1. 子元素浮動致使父元素高度不夠

問題描述：最小高度爲100px的父元素，嵌套一個300px高度的子元素，當子元素浮動時，父元素高度並不隨之升高。
問題視圖：

指望視圖：

待解決代碼：css

<!DOCTYPE html>
<html>
<head>
    <title>1</title>
    <meta charset="utf-8">
    <style type="text/css">
        .d0{width: 300px;background: #336;min-height: 100px;}
        .d1{float: right;width: 200px;background: #289;height: 200px;opacity: 0.5}
    </style>
</head>
<body>
    <div class="d0">
        <div class="d1">我是浮動的子元素</div>
    </div>
</body>
</html>

解決方案：父元素底部追加一個內容爲空的子元素，class爲clear，對其添加樣式.clear:after{content:"";display:block;clear:both;}html

已解決代碼：spa

<!DOCTYPE html>
<html>
<head>
    <title>1</title>
    <meta charset="utf-8">
    <style type="text/css">
        .d0{width: 300px;background: #336;min-height: 100px;}
        .d1{float: right;width: 200px;background: #289;height: 200px;opacity: 0.5}
        /*解決問題的代碼*/
        .clear:after{content:"";display:block;clear:both;}
    </style>
</head>
<body>
    <div class="d0">
        <div class="d1">我是浮動的子元素</div>
        <div class="clear"></div>
    </div>
</body>
</html>

2.子元素浮動致使外邊距溢出

問題描述：
在某些特殊的條件下，爲子元素設置上外邊距時，有可能會做用到父元素上。
問題視圖：

指望視圖：

待解決代碼：3d

<!DOCTYPE html>
<html>
<head>
    <title>2</title>
    <meta charset="utf-8">
    <style type="text/css">
        .d1{width: 300px;height: 100px;background: #336}
        .d2{width: 300px;height: 100px;background: #289}
        .d2son{width: 150px;height: 50px;background: #caa;opacity: 0.5;margin-top: 50px;}
    </style>
</head>
<body>
    <div class="d1">上面的div</div>
    <div class="d2">
        <div class="d2son">下面的div的子元素</div>
    </div>
</body>
</html>

解決方案：
在d2中的第一個子元素位置處（！！！必須是空子元素）生成內容爲空顯示方式爲table（！！！必須是table元素）
d2中添加第一個子元素，對其添加樣式：.d2:before {content:"";display:table;}
已解決代碼：code

<!DOCTYPE html>
<html>
<head>
    <title>2</title>
    <meta charset="utf-8">
    <style type="text/css">
        .d1{width: 300px;height: 100px;background: #336}
        .d2{width: 300px;height: 100px;background: #289}
        .d2son{width: 150px;height: 50px;background: #caa;opacity: 0.5;margin-top: 50px;}
        /*解決問題的代碼*/
        .d2:before {content:"";display:table;}
    </style>
</head>
<body>
    <div class="d1">上面的div</div>
    <div class="d2">
        <div class="d2son">下面的div的子元素</div>
    </div>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。