CSS Описание поплавка

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

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

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>

источник

2011-11-01 Xiaojun

Казалось бы, работать как и следовало ожидать. Можете ли вы объяснить, в чем проблема, и чего именно вы пытаетесь достичь? – Nix

Мне кажется странным, что вы что-то убрали ('clear: both;'), и тогда вам интересно, как это не работает так, как это делает пример w3school. Если вы удалите или замените что-то, и все перестанет работать. Вероятно, вы захотите вернуть его. – Joonas

Для записи [w3schools is bad] (http://w3fools.com), а [floatutorial] (http://css.maxdesign.com.au/floatutorial/), вероятно, является лучшим ресурсом, если вы хотите узнайте о поплавках. – You

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

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

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

Либо поставить div с ясным: оба; в нижней части родительского контейнера, или положить этому 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/

источник

2011-11-01 10:13:32 Nix

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

источник

2011-11-01 09:54:12

На самом деле хочу, чтобы я хотел, как работает float? Что касается вопроса, почему «а» помещается из содержащего элемента р? – Xiaojun

CSS Описание поплавка

ответ

Смежные вопросы