Почему <fieldset>s плавает? - PullRequest
Новая
       13

Почему <fieldset>s плавает?

13 голосов
/ 26 июня 2011

Рассмотрим следующий тестовый пример, в котором плавающий и встроенный элемент помещаются внутри <fieldset> против <div>: 

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        .float {float:right; background-color:red; height:200px;}
    </style>
</head>
<body>
<fieldset>
    <span>Inline!</span>
    <div class="float">Float!</div>
 </fieldset>
<fieldset>
    <span>Inline!</span>
    <div class="float">Float!</div>
</fieldset>

<div>
    <span>Inline!</span>
    <div class="float">Float!</div>
</div>
<div>
    <span>Inline!</span>
    <div class="float">Float!</div>
</div>
</body>
</html>

При визуализации наборы полей имеют высоту 200 пикселей (ониочистить поплавки?) в то время как div только такие высокие, как встроенные элементыВ чем причина такого поведения, и есть ли обходной путь, который позволяет наборам полей вести себя так же, как и div?

Ответы [ 2 ]

18 голосов
/ 26 июня 2011

Очевидно, <fieldset> элементы должны генерировать контексты форматирования блока для их содержимого :

Ожидается, что элемент fieldset создаст новый контекст форматирования блока.

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

Кажется, нет способа отменить это, но я не удивлюсь; вы не можете уничтожить контекст форматирования блока после его создания.

Кстати, <fieldset> s не clear плавает (если вы не дадите им стиль clear чего-то отличного от none). Когда элемент очищает числа с плавающей точкой (или говорят, что у них есть разрешение), он очищает только те предшествующие числа с плавающей точкой, которые касаются его в том же контексте форматирования. Родительский элемент также не очищает плавающие дочерние элементы, но он может установить контекст форматирования для них. Это поведение, наблюдаемое с <fieldset>, и это также то, что происходит, когда вы устанавливаете overflow что-то отличное от visible на родительском элементе.

Из spec (выделено мое):

Это свойство указывает, какие стороны ящика (ов) элемента могут не быть смежными с более ранним плавающим ящиком. Свойство 'clear' не учитывает поплавки внутри самого элемента или в других контекстах форматирования блока .

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

0 голосов
/ 26 июня 2011

Установка высоты для обёртки div; 

 <html>
 <head>    
  <style type="text/css">       
   .float {float:right; background-color:red;             height:200px;}   
</style> 
 </head> 
 <body>    
 <fieldset>    
   <span>Inline!</span>    
   <div class="float">Float!</div>  
 </fieldset> 
 <fieldset>     
    <span>Inline!</span>      
   <div class="float">Float!</div>
 </fieldset> 

  <div style="height:200px">    
   <span>Inline!</span>     
  <div class="float">Float!</div> </div> 
 <div style="height:200px">     
 <span>Inline!</span>    
 <div class="float">Float!</div> 
</div>
</body>
</html>
...