<html>
<head>
<style type="text/css">
div
{
background-color:#ccc;
}
</style>
</head>
<body>
<div>
<div style="float: left;">This is a text inside a div element.</div>
<div style="float: right;">We are still in the div element.</div>
</div>
</body>
</html>
Tại sao màu nền không hiển thị ở giữa 2 div đó? 
Màu nền cho div có số div con
Khi bạn thả nổi các phần tử, bạn nên cung cấp chiều rộng của các phần tử thả nổi. Nếu không, bạn có thể gặp phải các hành vi không mong muốn trên các trình duyệt khác nhau.
Check this tutorial, có thông tin tốt về nổi trong css. [link is dead]
Về cơ bản, nếu bạn cung cấp overflow:hidden; cho div vùng chứa và cung cấp chiều rộng cho các phần tử nổi, vấn đề của bạn sẽ được giải quyết.
<div style="overflow: hidden;">
<div style="float:left; width: 300px;">Some text</div>
<div style="float:right; width: 300px;">Some text</div>
</div>
Tương tự như vậy, bạn có thể thêm div khác bất cứ nơi nào bạn muốn bình thường hóa các ike dòng này:
<div>
<div style="float:left; width: 300px;">Some text</div>
<div style="float:right; width: 300px;">Some text</div>
<div style="clear:both;"></div>
<div>This div will be at the same place
as if the previous elements are not floated</div>
</div>
Cả hai sẽ làm việc :)
EDIT
Phương pháp khác mà Tôi sử dụng thường xuyên trong những ngày này là để nổi phần tử đầu tiên và thiết lập một margin-left thành phần tử sau. Ví dụ:
<div>
<div style="float: left; width: 300px;">Some text</div>
<div style="margin-left: 300px;">Some text</div>
<div style="clear: both;"></div>
</div>
Ưu điểm của phương pháp này là phần tử sau (div thứ hai trong trường hợp này) không cần chiều rộng cố định. Ngoài ra, bạn có thể bỏ qua div thứ ba (clear: both;). Nó là tùy chọn. Tôi chỉ cần thêm nó trong trường hợp div trôi nổi là dài hơn chiều cao hơn div thứ hai kể từ khi bạn không thêm nó div cha mẹ sẽ luôn luôn nhận được chiều cao của div thứ hai.
Chỉ cần đặt div vùng chứa thành overflow: hidden;.
Nếu bạn đặt các phần tử thả nổi, chúng sẽ không còn trong 'dòng chảy' bình thường của tài liệu nữa.
div { background: #ccc; overflow: hidden; }
Và bạn thậm chí còn không được thực hiện một vòng tròn tự do;)
Đó là bởi vì cả hai div s đang nổi nên chứa div không có chiều cao. Nếu bạn thêm con thứ ba div thì không phải là phao, hãy đặt chiều cao là 0 và clear:both bạn sẽ thấy màu nền xuất hiện.
Phần tử thả nổi không ảnh hưởng đến kích thước của phụ huynh, trừ khi phụ huynh cụ thể chứa các trẻ em sử dụng kiểu overflow.
Div bên ngoài của bạn có cùng màu nền như div con, nhưng chiều cao của bố mẹ bằng 0, vì vậy bạn không nhìn thấy nền của nó.
Khoảng trắng bạn đang hiển thị là phần thân và bạn đặt màu nền thành div nhưng không có trong phần thân. Đó là lý do phần cơ thể trống rỗng.
Để tô màu cho phần trống bạn nên thêm mã sau đây:
<html>
<head>
<style type="text/css">
div
{
background-color:#ccc;
}
body{
background-color:#ccc;
}
</style>
</head>
<body>
<div>
<div style="float: left;">This is a text inside a div element.</div>
<div style="float: right;">We are still in the div element.</div>
</div>
</body>
</html>
Bạn có thể thay đổi màu nền cơ thể bằng cách thay đổi màu nền trong phong cách cơ thể.
Yuck! Cố gắng không sử dụng 'clear: both' hack khi bạn có thể. Hầu như luôn có (/ luôn luôn?) Một giải pháp tốt hơn. – PeeHaa
Tôi không biết thủ thuật 'overflow: hidden'. – Gareth
Có vẻ như bạn đã học được điều gì đó ngày hôm nay :) Để hoàn thành nhận xét của tôi và giáo dục bạn nhiều hơn;) hãy xem khi sử dụng 'overflow: hidden;' hack khi bạn muốn sử dụng CSS3 (ví dụ: thả bóng). May mắn thay, chúng tôi có một giải pháp cho điều đó: http://fordinteractive.com/2009/12/goodbye-overflow-clearing-hack/ – PeeHaa