Почему очистить float <fieldset>?

Рассмотрим следующий тестовый пример, в котором плавающий и встроенный элементы помещаются внутри <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 пикселей (они очищают поплавки?), в то время как divs только высоки, как встроенные элементы. В чем причина этого поведения, и есть ли способ обхода, который позволяет полям вести себя как divs?

Ответы

Ответ 1

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

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

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

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

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

Из спецификации (выделено мной):

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

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

Ответ 2

Установить высоту для обертки 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>