CSS: Câu hỏi bố cục cơ bản - giữ các phần tử lồng nhau bên trong nhau

Question

Tôi tiếp tục phát hiện ra rằng nếu tôi có các div lồng nhau bên trong, và một trong những phần tử bên trong được thả nổi, phần bên ngoài sẽ không mở rộng xung quanh nó.

Ví dụ:

<div style='background-color:red; '> 
    asdfasdf 
    <div style='float:left; background-color:blue; width:400px; height:400px;'> 
     asdfasdfasdfasdfasdfasdfasdf<br /> 
     asdfasdfasdfasdfasdfasdfasdf<br /> 
     asdfasdfasdfasdfasdfasdfasdf<br /> 
     asdfasdfasdfasdfasdfasdfasdf<br /> 
     asdfasdfasdfasdfasdfasdfasdf<br /> 
     asdfasdfasdfasdfasdfasdfasdf<br /> 
     asdfasdfasdfasdfasdfasdfasdf<br /> 
     asdfasdfasdfasdfasdfasdfasdf<br /> 
     asdfasdfasdfasdfasdfasdfasdf<br /> 
     asdfasdfasdfasdfasdfasdfasdf<br /> 
     asdfasdfasdfasdfasdfasdfasdf<br /> 
    </div> 
    asdfasdf 
</div> 

gì tôi cần phải làm gì để div bên ngoài để làm cho nó che một bên? IE: Đặt màu viền/màu nền của nó xung quanh nó?

Ngoài ra, có nguyên tắc chung nào tôi đang gặp phải ở đây không? Nếu vậy, tôi nên tìm kiếm điều gì để hiểu rõ nó là gì?

Cảm ơn!

Sửa

Hi All,

Cảm ơn câu trả lời, ngữ nghĩa chính xác và không có, và cho các liên kết.

Mặc dù tôi sẽ sử dụng tràn trong công việc cuối cùng, tôi sẽ để lại câu trả lời của Ant P, vì nó là câu trả lời đầu tiên thực sự hiệu quả, và khiến tôi bị kẹt trong một thời gian ngắn, mặc dù nó xúc phạm ngữ nghĩa sự nhạy cảm.

Là một bản hack dài thời gian cố gắng chuyển sang bố cục css phong nha, tôi có thể hiểu, và thông cảm, bằng cách sử dụng hack không đúng ngữ nghĩa để hoàn thành công việc, mặc dù tôi chắc chắn anh ấy sẽ thay đổi thói quen sau này = o)

Answer 1

bạn có thể làm điều đó đúng với CSS sử dụng overflow: hidden

<div style='background-color:red;overflow:hidden;'> 
... 
</div> 

Answer 2

Nếu bạn chỉ thả nổi div bên ngoài, nó sẽ mở rộng để chứa các div lồng nhau. Việc kết hợp các phần tử nổi và không được sắp xếp trong bố cục thường gây rắc rối.

Answer 3

nó chỉ đơn giản là đáng kinh ngạc bao nhiêu lần đây là vấn đề cơ bản đối với một số câu hỏi CSS trên SO. Điều đáng kinh ngạc hơn là bao nhiêu lần ai đó đưa ra câu trả lời như Ant P's. Trong khi kỹ thuật chính xác, nó hoàn toàn không chính xác về ngữ nghĩa. Themis là hoàn toàn đúng. Chỉ cần thêm overflow:hidden vào phụ huynh của các div được thả nổi. Đôi khi để làm cho nó chơi tốt đẹp với IE, bạn có thể phải chỉ định chiều rộng HOẶC chiều cao. Đó thực sự là tất cả với nó.

Answer 4

Nếu bạn là kiểu mà thích giải thích (chứ không phải chỉ là "làm được điều này") đây là một số điều tuyệt vời để giải thích một số phương pháp:

Simple Clearing of Floats

How to Clear Floats Without Structural Markup

Clearing Floats

Answer 5

Bài viết này về CSS systems chắc chắn là đáng đọc. Như Darko Z nói thật đáng kinh ngạc khi thấy câu trả lời không đúng ngữ nghĩa của Ant P.

Answer 6

Tôi không thể đánh bại câu trả lời đã được đăng, nhưng đánh dấu của bạn.

Thêm phần này vào dưới cùng của file CSS của bạn và giữ nó nhận xét ra khi bạn không cần nó:

div 
{ 
    border-width: thin !important; 
    border-color: Orange !important; 
    border-style: solid !important; 
} 

label, span, /* whatever else you might want to see */ 
{ 
    border-width: thin !important; 
    border-color: Blue !important; 
    border-style: solid !important; 
} 

Thường thì tôi sẽ thấy rằng một bố cục mà thực sự hoạt động (đặc biệt là một trong những sử dụng "thêm một <br> với kiểu clear: both) sẽ không thực sự được làm tổ một cách chính xác, nhưng ai đó đã tinh chỉnh CSS để nó hoạt động bằng voodoo. Thực ra nhìn vào đường viền của các phần tử của bạn sẽ giúp rất nhiều và làm điều này trong CSS có nghĩa là bạn không phải chạm vào đánh dấu thực sự hoặc CSS chính của bạn để bật đường viền để gỡ lỗi.