Nếu một div có "rõ ràng: đúng", không có gì phải trôi nổi ở bên phải của nó, phải không?

Question

Tôi dường như đã nhầm lẫn với ý nghĩa của từ khóa "rõ ràng" css.

Tôi có một số phần tử div, tất cả đều có "float: left". Yếu tố div cuối cùng thứ hai cũng có "rõ ràng: đúng". Tôi nghĩ điều đó sẽ khiến nguyên tố tiếp theo chuyển sang dòng tiếp theo. Nhưng đối với tôi thì không.

Dưới đây là ví dụ của tôi:

<div class="Section"> 
    <div class="Thumbnail"></div> 
    <div class="Number">0</div> 
    <div class="Title">ShopTVC Wallace and Gromit WOA 6Apr11</div> 
    <div class="Duration">00:00:32</div> 
</div>​ 

Trông như thế này:

Tôi cố gắng để làm cho thời gian ("00:00:32"), xuất hiện trên dòng tiếp theo , ở bên phải của hình thu nhỏ (hình chữ nhật màu xanh lam).

Tôi biết rằng tôi có thể đặt ba div cuối cùng vào div vùng chứa khác, nhưng mục đích của câu hỏi này là hiểu tại sao "rõ ràng: đúng" không dừng thời gian trôi nổi ở bên phải tiêu đề.

Đây là CSS:

div.Section 
{ 
    overflow:auto; 
    background:cornsilk; 
    border:2px solid navy; 
    padding:12px; 
} 

div.Section div.Thumbnail 
{ 
    width:64px; 
    height:42px; 
    background:SteelBlue; 
    foreground:Navy; 
} 

div.Number 
{ 
    width:16px; 
    margin-left:6px; 
} 

div.Duration 
{ 
    margin-left:22px; 
} 

div.Section div 
{ 
    float:left; 
} 

div.Section div.Title 
{ 
    color:DarkGreen; 
    clear:right; 
} 

Và, tất nhiên, liên kết jsfiddle: http://jsfiddle.net/8J7V6/3/

Answer 1

Thuộc tính clear không ngăn các phần tử được đặt trong không gian đó sau khi các yếu tố xóa. Nó ngăn cản các phần tử được đặt ở nơi đã có các phần tử đã trôi nổi theo hướng đó trước nó. Thêm clear:left vào div.Duration sẽ đặt nó ở bên dưới hộp hải quân. Thêm <br/> trước khi thời lượng có thể giải quyết được sự cố của bạn hoặc, như bạn đã nói trong câu hỏi của mình, bạn có thể sử dụng một div vùng chứa khác cho ba div cuối cùng.

Answer 2

Tôi đã sử dụng padding và lề. Nếu không thể sử dụng trong trường hợp của bạn thì giải pháp sau sẽ không phù hợp.

http://jsfiddle.net/8J7V6/5/

Answer 3

Không có gì nổi ở bên phải của nó. Vấn đề bạn đang gặp phải là bạn đã gửi tất cả nội dung của bạn trước thời gian, và sau đó bạn đang nói thời gian trôi nổi sang bên trái. Nó vẫn đang trôi nổi ở bên trái, nó chỉ xếp chồng lên trên cùng của nội dung đó là đã có ở bên trái.

Nhưng có, thanh toán bù trừ ở bên phải làm cho yếu tố đó phá vỡ qua tất cả các phần tử được thả sang phải trước nó. Xóa không ảnh hưởng đến các yếu tố sau nó.

Bạn đã thử using a simple <br /> after your title chưa?

Answer 4

.Duration { clear: left; } nên làm việc

Answer 5

Câu trả lời của ahruss là câu trả lời đúng, nhưng tôi cũng nhận thấy không có ai thực sự trả lời câu hỏi của bạn. Về cơ bản, clear:left là các phần tử nổi bên trái. clear:right là các phần tử nổi bên phải.

Vì phần tử của bạn đang di chuyển sang trái, không phải, clear:right sẽ không ảnh hưởng đến nó.

Điều khác bạn có thể làm là bọc hai phần tử văn bản vào một div riêng biệt từ hộp màu xanh, nổi div chứa trong và div màu xanh, sau đó khi bạn thả nổi hai phần tử văn bản, mã clear:left của bạn sẽ đặt ngày bên dưới văn bản vẫn nằm trong div vùng chứa của bạn chứ không phải dưới hình ảnh màu xanh lam ở bên trái.

Như thế này:

<div class="Section"> 
    <div class="Thumbnail"></div> 
    <div class="TextContainer"> 
     <div class="Number">0</div> 
     <div class="Title">ShopTVC Wallace and Gromit WOA 6Apr11</div> 
     <div class="Duration">00:00:32</div> 
    </div> 
</div> 

và thêm video này vào css của bạn:

div.TextContainer { 
    float:left; 
} 

Thêm trong bất cứ phong cách hình ảnh khác mà bạn cần.