CSS Float объяснение - PullRequest
Новая
       24

CSS Float объяснение

0 голосов
/ 01 ноября 2011

CSS Float сводит меня с ума, кто-нибудь может объяснить следующую ситуацию?

Как воспроизвести: просто скопируйте следующий фрагмент кода из

http://www.w3schools.com/css/tryit.asp?filename=trycss_float_clear

Почему без clear:both не работает? 

                <html>
                <head>
                <style type="text/css">
                .thumbnail 
                {
                float:left;
                width:110px;
                height:90px;
                margin:5px;
                }
                .text_line
                {
                display:block;
                height:90px;
                width:300px;
                margin:0px;

                background-color:red;
                }


                </style>
                </head>

                <body style="display:block">

                <h3>Image Gallery</h3>
                <p>Try resizing the window to see what happens when the images does not have enough room.</p>
                <img class="thumbnail" src="klematis_small.jpg" width="107" height="90">
                <img class="thumbnail" src="klematis2_small.jpg" width="107" height="80">
                <img class="thumbnail" src="klematis3_small.jpg" width="116" height="90">
                <img class="thumbnail" src="klematis4_small.jpg" width="120" height="90">
                <p class="text_line">a</p>

                <img class="thumbnail" src="klematis_small.jpg" width="107" height="90">
                <img class="thumbnail" src="klematis2_small.jpg" width="107" height="80">
                <img class="thumbnail" src="klematis3_small.jpg" width="116" height="90">
                <img class="thumbnail" src="klematis4_small.jpg" width="120" height="90">
                </body>
                </html>

Ответы [ 2 ]

3 голосов
/ 01 ноября 2011

Когда вы перемещаете элемент блока, вы говорите браузеру расположить его рядом с предыдущим перемещаемым объектом, если контейнер достаточно широк (в противном случае он упадет ниже предыдущего объекта).

Когда вы перемещаете объект, вы по сути вынимаете его из потока документов.Плавающий объект является частью родительского контейнера, но его стиль модели коробки (ширина, высота и т. Д.) Не рассчитывается в родительский контейнер.Поэтому, если в родительском контейнере есть куча плавающих элементов, его высота будет равна нулю (если высота не фиксирована), поскольку высота плавающего элемента игнорируется.

Чтобы это исправить, вынеобходимо очистить поплавки, что в основном означает, что порядок будет восстановлен.

Либо поставьте div с clear: both;в нижней части родительского контейнера или поместите этот класс clearfix в родительский контейнер: 

/* Contain floats: nicolasgallagher.com/micro-clearfix-hack/ */ 
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

Это было жестоко упрощенное объяснение.Подробнее о поплавках и расчистке здесь: http://dev.opera.com/articles/view/35-floats-and-clearing/

2 голосов
/ 01 ноября 2011

Просто вставьте clear:both обратно (в .text_line)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...