Lỗi tràn CSS: bị ẩn với phao

Question

Tôi đọc số following code on w3schools và không hiểu cách thuộc tính overflow sẽ tác động đến việc văn bản có xuất hiện ở bên phải của ul hay không.

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
} 
 

 
li { 
 
    float: left; 
 
} 
 

 
a { 
 
    display: block; 
 
    width: 60px; 
 
    background-color: #dddddd; 
 
    padding: 8px; 
 
}

<ul> 
 
    <li><a href="#home">Home</a></li> 
 
    <li><a href="#news">News</a></li> 
 
    <li><a href="#contact">Contact</a></li> 
 
    <li><a href="#about">About</a></li> 
 
</ul> 
 
<p><b>Note:</b> overflow:hidden is added to the ul element to prevent li elements from going outside of the list.</p>

Tôi biết rằng overflow:hidden được sử dụng để xử lý nội dung mà đi bên ngoài của hộp nhưng không hiểu tại sao nó được áp dụng trong trường hợp này.

Answer 1

tôi cố gắng để chấm dứt sự nhầm lẫn:

ul là phần tử cấp khối là phần tử p (chúng kéo dài đến 100% chiều rộng của bố mẹ). Đó là lý do tại sao theo mặc định, p sẽ xuất hiện bên dưới ul nếu không có chiều rộng hoặc hiển thị nào được khai báo trên các yếu tố đó.

Bây giờ trong ví dụ của bạn, ul chỉ chứa các phần tử nổi. Điều này làm cho nó sụp đổ đến độ cao 0px (Nó vẫn có chiều rộng 100% mặc dù bạn có thể thấy trong ví dụ). Các p liền kề sẽ xuất hiện ở bên phải của các float li s bởi vì chúng được coi là các phần tử lưu hành bình thường.

Bây giờ khai báo overflow (bất kỳ giá trị nào khác ngoài visible) thiết lập block formatting context mới, làm cho số ul chứa con của nó. Đột nhiên, ul "xuất hiện trở lại", không còn kích thước 0px nữa. p bị đẩy xuống đáy. Bạn cũng có thể khai báo position:absolute để đạt được cùng hiệu ứng "thanh toán bù trừ" (với hiệu ứng phụ hiện tại là ul được lấy ra khỏi luồng yếu tố thông thường - p s sẽ bị chồng chéo bởi ul.)

See the example fiddle

Nếu bạn là thành công cụ kỹ thuật, so sánh các đoạn theo của spec CSS:

§10.6.3 Block-level non-replaced elements in normal flow when 'overflow' computes to 'visible'
và
§10.6.7 'Auto' heights for block formatting context roots. (Cám ơn BoltClock đã đào các liên kết).

ul{ 
 
    list-style-type:none; 
 
    margin:0; padding:0; 
 
    background-color:#dddddd; 
 
    border:2px solid red; 
 
} 
 
li{ 
 
    float:left; 
 
} 
 
a{ 
 
    display:block; 
 
    width:60px; 
 
    background-color:#555; 
 
    color:white; 
 
} 
 
p{ 
 
    margin:0; 
 
    outline:2px dotted blue; 
 
} 
 
#two{ 
 
    clear:both; 
 
    overflow:hidden; 
 
}

No overflow: 
 
<ul> 
 
<li><a href="#home">Home</a></li> 
 
<li><a href="#news">News</a></li> 
 
<li><a href="#contact">Contact</a></li> 
 
<li><a href="#about">About</a></li> 
 
</ul> 
 
<p>Notice the collapsed ul - no background-color visible, collapsed border and this paragraph treats the lis as regular floats </p> 
 
<br> 
 
With overflow: hidden 
 
<ul id="two"> 
 
<li><a href="#home">Home</a></li> 
 
<li><a href="#news">News</a></li> 
 
<li><a href="#contact">Contact</a></li> 
 
<li><a href="#about">About</a></li> 
 
</ul> 
 
<p>the ul reappeared - it now contains the child li's - the float is cleared</p>

Answer 2

Thay vì sử dụng overflow:hidden;, hãy sử dụng clear:both; cho số <p>. ở đây nó đang được sử dụng http://jsfiddle.net/Mvv8w/. Về cơ bản, overflow:hidden sẽ xóa mọi thứ sang một bên, giống như clear:both;.

Answer 3

Thiết lập overflow: hidden trên một thành phần gây ra ngữ cảnh float mới được tạo, vì vậy các phần tử được thả nổi bên trong một phần tử có áp dụng overflow: hidden sẽ bị xóa.

http://www.w3.org/TR/CSS2/visuren.html#block-formatting

Answer 4

Đây là lý do tại sao w3schools không phải là một nguồn đáng tin cậy cho nhà thiết kế web/nhà phát triển. Bạn là chính xác, nó là một ví dụ khủng khiếp.

Nó không phải vì, trong ví dụ này, phần tử gốc không có cố định. Hơn nữa, nó là một thẻ danh sách không được sắp xếp, mà sẽ kéo dài đến kích thước của nó là trẻ em bất kể.

http://jsfiddle.net/EhphH/

CSS

.parent { 
    width: 150px; 
    height: 100px; 
    padding: 10px; 
    background: yellow; 
    overflow: hidden; 

} 
.child { 
    float: left; 
    width: 75px; 
    height: 120px; 
    margin: 10px; 
    background: blue; 

} 
.baby { 
    width: 200px; 
    height: 25px; 
    background: green; 
} 

Markup

<div class="parent"> 
    <div class="child"> 
     <div class="baby"> 
     </div> 
    </div> 
    <div class="child"> 
    </div> 
</div>