为什么我的图像不尊重其父（部分）的填充答案

【问题标题】：Why my image doesn't respect its parent's (section) padding为什么我的图像不尊重其父（部分）的填充
【发布时间】：2014-01-19 06:34:41
【问题描述】：

我有一个奇怪的情况，一个图像和一个部分。你可以从我的github下载html、css和img1

情况：我有一个 section 标签，它从四面八方都有 padding:15px。在该部分中，我有一个 img，向左浮动，然后是一个 p 和一个带有两个按钮的 span。该部分还有一个边框和边距：35px
我的问题：图像不尊重该部分的底部填充并穿过该部分的底部边框。
我尝试将 img 放在该部分内的 div 中，并尝试为该部分提供一个高度值，为图像的高度提供 100%，但它没有改变任何东西

这个问题的最佳解决方案是什么，以便图片占据该部分的所有高度，包括该部分的顶部、左侧和底部填充？

在github上，退一步，是一个ppt文件TASKS.ppt。第三张幻灯片是我试图实现的目标。编辑：由于要求代码，这里是： HTML：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Music categories</title>
    <link href="Ex03MusicCategories.css" rel="stylesheet" />
</head>
<body>
    <header>
        <h1>Music Categories</h1>
    </header>
    <section>
        <img src="img1.png" />
        <div>
            <p>Even more websites all about website templates on <span>Just Web Templates</span> .</p>
            <span>
                <input type="button" value="Listen" />
                <input type="button" value="Add" />
            </span>
        </div>

    </section>
</body>
</html>

CSS：

body {
    background-color: #EEE;
    padding-top: 14px;
    padding-left: 12px;
    padding-right: 8px;
    padding-bottom: 25px;
}

    body header h1 {
        font-weight: lighter;
        font-size: 1.5em;
        font-family: Arial;
        letter-spacing: -2px;
    }

section {
    border-style: solid;
    border-color: #989898;
    border-width: 2px;
    padding: 15px;
    margin: 35px 0px;
}

    section img {
        float: left;
    }

        section img:after {
            clear: both;
        }

图片img1.png

【问题讨论】：

这里不提供链接，而是提供您的代码和图像。

标签： image css padding

【解决方案1】：

这是经典，搜索clearfix。一种可能的解决方案是

section {
    overflow: hidden;
}

见JSFiddle

更新：

CSS-Tricks - All About Floats 上有一篇关于 CSS float 和 clear 的文章。

基本上，你需要clear，当

元素应低于浮动元素

还有一些clearfix，当

浮动元素的父级折叠，您希望父级环绕/包含浮动子级

您也可以查看 Stackoverflow css-float tag wiki（css-clear 的别名）或 clearfix

【讨论】：

维伦丹克！我知道 clearfix，但我不明白在哪些情况下需要它。