Thực hành tốt nhất cho CSS rõ ràng hoặc tràn

Question

Có một cuộc thảo luận với một đồng nghiệp về những gì là thực hành tốt nhất với CSS rõ ràng/tràn. Hãy đóng một người trong chúng ta và giải thích tại sao người ta lại tốt hơn người kia.

Joel CODE (sử dụng tràn):

<style> 
    .container { overflow: hidden; } 
    .one, .two { float: left; width: 50px; height: 50px; background-color: red; } 
</style> 

<div class="container"> 
    <div class="one"></div> 
    <div class="two"></div> 
</div> 
<div class="container"> 
    <div class="one"></div> 
    <div class="two"></div> 
</div> 
<div class="container"> 
    <div class="one"></div> 
    <div class="two"></div> 
</div> 
<div class="container"> 
    <div class="one"></div> 
    <div class="two"></div> 
</div> 

CHRIS' CODE (sử dụng rõ ràng):

<style> 
    .clear { clear: both; } 
    .one, .two { float: left; width: 50px; height: 50px; background-color: red; } 
</style> 

<div class="container"> 
    <div class="one"></div> 
    <div class="two"></div> 
    <div class="clear"></div> 
</div> 
<div class="container"> 
    <div class="one"></div> 
    <div class="two"></div> 
    <div class="clear"></div> 
</div> 
<div class="container"> 
    <div class="one"></div> 
    <div class="two"></div> 
    <div class="clear"></div> 
</div> 
<div class="container"> 
    <div class="one"></div> 
    <div class="two"></div> 
    <div class="clear"></div> 
</div> 

Cả hai làm cho hình ảnh này:

Ai là đúng ? :)

Answer 1

Nếu bạn đang ở trong tình huống mà bạn luôn biết yếu tố thành công sẽ như thế nào, bạn có thể áp dụng rõ ràng: cả hai; giá trị cho yếu tố đó và đi về doanh nghiệp của bạn. Điều này lý tưởng vì nó không đòi hỏi phải có các hacks ưa thích và không có yếu tố bổ sung nào làm cho nó trở thành ngữ nghĩa hoàn hảo. Tất nhiên mọi thứ thường không hoạt động theo cách đó và chúng tôi cần có thêm các công cụ xóa nổi trong hộp công cụ của chúng tôi.

http://css-tricks.com/all-about-floats/

Answer 2

Đây là một thỏa hiệp:

DEMO jsBin

CSS:

.container { display:table; } 
    .one, .two { float: left; width: 50px; height: 50px; background-color: red; margin:1px;} 

HTML:

<div class="container"> 
    <div class="one"></div> 
    <div class="two"></div> 
</div> 
<div class="container"> 
    <div class="one"></div> 
    <div class="two"></div> 
</div> 
<div class="container"> 
    <div class="one"></div> 
    <div class="two"></div> 
</div> 
<div class="container"> 
    <div class="one"></div> 
    <div class="two"></div> 
</div> 

Tôi sẽ viết theo cách này. Mã CHRIS là một cái gì đó tôi không viết nhưng chỉ gây ra các DIV trống dư thừa.

Answer 3

Vì CSS trong cả hai trường hợp đều giống nhau về độ phức tạp và khả năng bảo trì, giải pháp với HTML đơn giản hơn (và do đó, nhỏ hơn) và các chiến thắng tải trọng tổng thể. Nó không phải là một sự khác biệt lớn, và với nén, mã lặp đi lặp lại có thể sẽ biến mất, nhưng đơn giản hơn và nhỏ hơn luôn luôn tốt hơn nếu mọi thứ khác bằng nhau.

Answer 4

Còn về micro clearfix thì sao? Không có đánh dấu thêm, không có overflow: hidden; cắt, hỗ trợ trình duyệt chéo cho IE 6+.

Answer 5

Sở thích cá nhân của tôi là kỹ thuật overflow:hidden. Tôi nghĩ điều này là bởi vì nổi gì đó là một quyết định phong cách. Để đặt một lớp của clear trong đánh dấu có vẻ như với tôi như thêm thông tin kiểu vào lớp dữ liệu. Nó tương tự (nhưng hư không gần như là xấu) như thêm css nội tuyến. (Infact, nếu bạn nghĩ về nó, bạn cũng có thể thêm style="clear:both" vào div bạn muốn thêm class="clear" đến).

Đây tất nhiên là ý kiến ​​cá nhân của tôi. Tôi không yêu cầu cái nào tốt hơn cái kia. Nhưng tôi rất hiếm khi gặp sự cố với overflow:hidden.

Answer 6

tràn: ẩn được sử dụng tốt nhất khi bạn có vùng chứa nhỏ hơn nội dung bên trong; trong khi rõ ràng: cả hai được sử dụng tốt nhất khi bạn muốn một container nổi đến vị trí không chính nó cùng với container gần nhất.

xem ví dụ về squres đỏ của bạn, bạn sẽ muốn sử dụng rõ ràng hơn là tràn, nhưng không được thực hiện ở đây. có lẽ một cái gì đó giống như:

.container { width:110px; clear:both; } 
.one, .two { float: left; width: 50px; height: 50px; margin-right:10px; background-color: red; } 

về cơ bản bạn vừa sai vừa phải. Joel sử dụng cách tiếp cận html tốt hơn, nhưng Chris đang sử dụng đúng mã CSS, chỉ theo cách sai.