Overflow: hidden làm gì đối với thẻ ul?

Question

tôi là tạo ra một danh sách nhiều cột bằng cách sử dụng hướng dẫn từ bài viết này:

http://csswizardry.com/2010/02/mutiple-column-lists-using-one-ul/

Tóm lại, nó nói để làm điều gì đó dọc theo dòng này:

HTML:

<div class='block'> 
    <ul> 
    <li> 
     Item1 
    </li> 
    <li> 
     Item2 
    </li> 
    <li> 
     Item3 
    </li> 
    </ul> 
</div> 

CSS:

.block { 
    border: 1px solid black; 
    padding: 10px; 
} 
.block ul { 
    width: 100%; 
    overflow: hidden; 
} 
.block ul li { 
    display: inline; 
    float: left; 
    width: 50%; 
} 

Và nó hoạt động tuyệt vời, nhưng tôi đã bĩu môi tại tràn: khai báo CSS ẩn.

Nếu không có nó, div bên ngoài của tôi sụp đổ như vậy:

http://jsfiddle.net/alininja/KQ9Nm/1/

Khi nó bao gồm, div ngoài cư xử chính xác như thế nào tôi sẽ muốn nó được:

http://jsfiddle.net/alininja/KQ9Nm/2/

Tôi tự hỏi tại sao overflow: hidden đang kích hoạt hành vi này. Tôi hy vọng nó sẽ cắt các đồ vật li bên trong thay vì buộc div bên ngoài mở rộng đến chiều cao cần thiết.

Cảm ơn bạn đã tìm kiếm!

Answer 1

Mọi thứ bên trong có thể đang trôi nổi sẽ không bị cắt bớt trừ khi bạn đã đặt bộ tràn để ẩn, cuộn hoặc tự động. Phép thuật thực sự của phương thức là không có yếu tố nào được thiết lập chiều cao, khi bạn thiết lập tràn vào ẩn, nó sẽ chiếm chiều cao của các phần tử bên trong.

Tại đây div sẽ không bao quanh img vì img đang trôi nổi.

<div><img style="float:left;height:100px" /></div> 

Tại đây div sẽ hiện thực hóa chiều cao của img hiện tại có tràn thích hợp.

<div style="overflow:hidden"><img style="float:left;height:100px" /></div> 

Nếu bạn đặt chiều cao thiết lập và sau đó đặt tràn, nó sẽ cắt bất kỳ thứ gì nếu không sẽ tràn ra ngoài.

<div style="overflow:hidden;height:50px"><img style="float:left;height:100px" /></div> 

Lưu ý rằng trong rất nhiều trường hợp, các kỹ thuật này có thể được sử dụng để tránh đánh dấu thêm clear:both.

Answer 2

overflow: hidden; là ở đó để chứa nổi li s. overflow: hidden; tạo ra một bối cảnh định dạng khối mới - và đó là những yếu tố có bối cảnh định dạng khối riêng của chúng - chúng chứa các phao.

tôi sẽ trỏ đến một câu trả lời ở đây trên StackOverflow mà giải thích điều này một chút nữa: Adding CSS border changes positioning in HTML5 webpage

Answer 3

Với overflow: hidden, nội dung không lái xe/đẩy kích thước của UL. Kích thước UL ghi đè và bỏ qua nội dung có phù hợp với nội dung đó hay không.

Không tràn: ẩn nội dung và hành vi của chúng có thể hoặc không thể điều khiển kích thước tổng thể của UL. Điều này chủ yếu là do UL là nhiều hơn một container của những ranh giới được thiết lập/bị ảnh hưởng bởi nội dung của nó. Với overflow hidden, UL hoạt động nhiều hơn như một cổng nhìn với các kích thước trọng, không quá nhiều container.