Прави ли overflow:hidden действително clear:


0

Здравейте,

Наскоро се рових в един сайт и видях един зададен въпрос са float-натите <li> в <ul>. Момчето питаше защо като направи float:left на <li> му изчезва background-a на <ul>. Дотук ясно, но единият отговор беше да използва overflow:hidden на <ul>. Проверих и се оказа така, но никъде преди това не бях го чел или чувал.

Въпроса ми е дали overflow:hidden прави действително clearfix на родителя когато му се сложи или все пак трябва да използваме clearfix като следния:

<ul class="clearfix">
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

 

.clearfix { *zoom: 1; }
.clearfix:after { 
width: 100%; 
content: ''; 
font-size: 0; 
line-height: 0; 
text-indent: -4000px; 
clear: both; 
display:block; 
}

И още един въпрос за да не пиша нова тема ... също така мислех, че задаване на height: на родителя е метод за чистене, но в същата тема бяха написали, че работи все пак, но в никакъв случай не било метод. Някой може ли да ми обясни защо е така - кога всъщност работи и кога не и защо щом работи не се смята за метод?


в Уеб дизайн и UI технологии от Панайот Толев (0 точки)


Отговори



4
По първия въпрос - използването на overflow за чистене е възможен вариант, но не е препоръчителен - не можеш след това да използваш абсолютно позиционирани елементи, чупят ти се различните сенки и ефекти които може да ползваш с css3. Колкото до 2рия вариант половината от сложените пропъртита са напълно излишни. Ще има специална лекция на която ще се говорят тези неща в детайли.
По втория ти въпрос, който малко припокрива първия - отново трябва да се изпише доста за да се обясни защо дефакто е така, но практически слагайки height ти само изкуствено залъгваш, за размера на родителя, но той в никакъв случай няма да може да бъде използван правилно в последствие

от paveld3 (17458 точки)


0
Благодаря за изчерпателния отговор

от Панайот Толев (0 точки)


3

Това е достатъчно за fix-a:

 

.clearfix
{
min-height:0;
_zoom:1;
}
 
.clearfix:after
{
content:"";
clear:both;
display:block;
}

от bobbykolev (4168 точки)