Question

我有一个css-beginner（或者可能是缺乏思考）的问题，也就是说，我的段落与我的浮动框没有完美对齐，为什么会这样？

HTML：

<html>
    <head>
        <title>page_4</title>
        <link rel="stylesheet" type="text/css" href="styles.css">
        <link rel="stylesheet" type="text/css" href="float4.css">       
    </head>

    <body>
        <p>
            Fetrnenmm vulputate ml non varans. Fusce ai luctus motus. NulLa nec
            neque a tisus elemenmm dictum. Nullam Id relit tincidunr libero
            fringilla varius. Phasellus eu aliquen ligula, non sociales leo. Nam
            Laoeeet massa id luctus interdum. Ut nlnices uistique dignissim. Donec
            est lectus, molestie sagiuis erat eget, lacilisis venenatis ex. Prin
            iaculis enim et magna porta, vitae ullamcotper mi viverra. Nullam
            lacilisis libero.
        </p>
        <div class="box grey_box left">
            <div class="box blue_box right">
                <p class="box pink_box left">Curabitur iacullis tincidunt tortor sit amet pharetra</p>
                <p>Sed pretium lacus veut, a porttitor quam ullamcorper ut. Praesent ac
                tellus pomitor, luctus sapien eget, posuere orci. Aenean pulvinar
                tnstique congue. Sed pellentesque varius vehicula. Curabitur feugiat,
                metus vitae congue fringilla.</p>
            </div>
            <p>Phasellus mollis, diam in rutrum dapibus, lorem nulla accumsan felis.
            Curabitur iaculis tincidunt tortor sit amet pharetra.</p>
            <p>Sed lobortis, sapien a semper pretium, ligula augue luctus est, eget.
            Mauris ac facilisis libero. Curabitur semper cursus. Ligula augue luctus
            est, eget. Mauris ac facilisis libero. Curabitur semper cursus.</p>
        </div>
        <p>
        Mauris tincidunt, massa non pretium scelerisque, ligula massa varius
        arcu, eu blandit enim quam a odio. Sed congue tempor ipsum in eleifend.
        Ut interdum erat blandit eros gi-avida bibendum. Nunc ac egestas odio.
        Nullam sodales lectus quis varius Iaoreet. Donec cursus erat lectus, et
        molestie uma tristique in. Cras vitae diam vulputate, imperdiet ligula
        ac, viverra libero.</p>
        <p>Fusce sagittis, justo et vulputate tincidunt, diam turpis efficitur
        diam, ut facilisis risus lorem a lacus. Maecenas maximus arcu eu feus
        dapibus, nec elementum tellus tincidunt. Quisque imperdiet punis id
        fringua fringilla.</p>
        <p>Ut sodales ut erat quis bibendum. Etiam auctor pharetra nisi. Integer
        venenatis non feus sit amet elementum. Pellentesque lorem metus,
        efficitur eu nisi sed, vestibulum luctus eros. Sed magna risus, auctor
        dictum nisl ut, fermentum aliquet turpis. Sed ante Purus.</p>
        <p>Etiam in lacinia augue. Aenean pretium varius enim vel malesuada. Nam
        ullamcorper nisi non augue facilisis scelerisque. Integer interdum
        ultricies orci, ac porttitor eut sodales eu. Integer sit amet placerat
        nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis
        aliquet eu enim eu vulputate. Vivamus elementum dolor a Ieo elementum
        accumsan.</p>
        <p>Ut sodales ut erat quis bibendum. Etiam auctor pharetra nisi. Integer
        venenatis non feus sit amet elementum. Pellentesque Iorem metus,
        efficitur eu nisi sed, vestibuuum luctus eros. Sed magna risus, auctor
        dictum nisl ut, fermencum aliquet turpis. Sed ante punis.
        </p>
    </body>
</html>

CSS：

html
{
    background-color: #555;
}

body
{
    width: 960px;

    margin: 60px auto;
    padding: 20px;

    background-color: white;
}



.left
{
float: left;
}

.right
{
float: right;
}

.box
{
padding: 15px;
}

.blue_box
{
width:  300px;

margin: 0 0 15px 15px;

background: #E0E0F8;
}

.grey_box
{
width: 460px;

margin: 0 20px 20px 0;

background-color: darkgrey;
}

.pink_box
{
width: 135px;

margin: 0 15px 15px 0;

background-color: lightpink;
}

这是小提琴：http://jsfiddle.net/2voh0pjb/。

Answer 1

p元素有余量。清除它：

p{margin:0}

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p

为什么我的其他块元素完全包裹在我的浮动盒子周围？

1 个答案: