Поплавки и обвал маржи - PullRequest
Новая
       54

Поплавки и обвал маржи

0 голосов
/ 10 ноября 2009

так что мне трудно понять обстоятельства, при которых поплавок может иметь границы, разрушающиеся через него, и как это влияет на положение поплавка. Я включил страницу, которая, кажется, показывает два разных поведения на одной странице.

Красный поплавок, кажется, располагается перед полями, которые прошли через него, в то время как синие внизу, кажется, пропускают через них поля и затем позиционируются после того, как эти поля свернулись.

Любая помощь будет высоко ценится.

Ура, Ben 

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Inheritance Tests</title>
        <style>
        * { 
            margin: 0px ;
            padding: 0px ;

            font-family: courier ;
            font-size: small ;
        }

        .test4 {width: 200px; height: 100px; border-style: solid; border-width: 1px;}
        .test5 {border: 1px solid red; width: 200px; height: 50px; float: left; }

            .floatedRect {
                width: 50px ;
                height: 50px ;
                float: left ;
                background-color: #9cf ;
            }

            .text {
                margin: 10px ;
            }
        </style>
    </head>
    <body>
        <div class="test4">
            Normal Flow
        </div>

        <div class="test5">
            Floated
        </div>

        <div style="margin-top: 100px">
            Has a top margin
        </div>

        <div style="clear: both">
            <div class="floatedRect"></div>
            <div class="text">some text</div>
            <div class="floatedRect"></div>
            <div class="text">some text</div>
            <div class="floatedRect"></div>
            <div class="text">some text</div>
        </div>
    </body>
</html>

Ответы [ 4 ]

3 голосов
/ 10 ноября 2009

Может быть, глава 8.3.1 Свертывание полей в спецификации CSS 2.1 может помочь?

2 голосов
/ 17 февраля 2012

Во-первых, ваш код сделан легким для понимания. http://jsfiddle.net/gD9PL/

Теперь ваш ответ, он не имеет никакого отношения к теме плаваний или обвалу полей вообще.

На самом деле то, что вы видите, это то, что синие div идут вниз, потому что причина в том, что их содержащий div толкается вниз вторым div в строке, которая является текстовым div, и имеет верхнее поле.

Если вы поставите границу в 1 пиксель, то вы увидите другую, отличную от синей, дивы (которые всплывают, а не выталкиваются так, как это было с рамкой 0px, содержащей div). http://jsfiddle.net/gD9PL/1/

1 голос
/ 10 ноября 2009

Я не уверен, что полностью понимаю вопрос, но попробую:

Я не верю, что есть время, когда поплавок разрушит запас. Я посмотрел на ваш код и не вижу никаких полей, установленных в css, которые затем «сворачиваются» при просмотре в браузере (я использую Safari).

Вот мои мысли:

В первой части вашего примера у вас есть обычный поток div перед плавающим div. Плавающий div будет визуализирован ниже нормального потока div.

Во второй части вашего примера у вас есть div с floatedRect выше обычных div-потоков. Вот когда вы видите, что текст перемещается вправо. Это не влияет на поля текста div или сворачивание полей. Это просто позволяет тексту «плавать» вокруг div-ов floatedRect. Я изменил ваш код для иллюстрации: 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Inheritance Tests</title>
    <style>
    * { 
        margin: 0px ;
        padding: 0px ;

        font-family: courier ;
        font-size: small ;
    }

    .test4 {width: 400px; height: 100px; border-style: solid; border-width: 1px;}
    .test5 {border: 1px solid red; width: 200px; height: 50px; float: left; margin:10px; }

        .floatedRect {
            width: 50px ;
            height: 50px ;
            float: left ;
            background-color: #9cf ;
        }

        .text {
            margin: 10px; border:1px solid red; position:relative; z-index:1;
        }
    </style>
</head>
<body>


    <div class="test5">
            Floated
    </div>

     <div class="test4">
            Normal Flow
    </div>

    <div style="margin-top: 100px">
        Has a top margin
    </div>

    <div style="clear: both">
        <div class="floatedRect"></div>
        <div class="text">some text</div>
        <div class="floatedRect"></div>
        <div class="text">some text</div>
        <div class="floatedRect"></div>
        <div class="text">some text</div>
    </div>
</body>

Обратите внимание, что текстовые элементы div имеют отступ по 10 пикселей, но текст был сдвинут вправо с помощью элементов floatedRect.

Надеюсь, это поможет.

0 голосов
/ 06 января 2011

Энди Бадд написал статью о CSS и сокращающихся полях:

http://andybudd.com/archives/2003/11/no_margin_for_error/

Несмотря на то, что датировано 2003 годом, основные принципы все еще применяются. Я нашел эту статью полезным обновлением.

...