Các phần tử nổi không thêm vào chiều cao của phần tử container và do đó nếu bạn không xóa chúng, chiều cao của container sẽ không tăng ...
Tôi sẽ chỉ cho bạn một cách trực quan:
Giải thích thêm:
<div>
<div style="float: left;"></div>
<div style="width: 15px;"></div> <!-- This will shift
besides the top div. Why? Because of the top div
is floated left, making the
rest of the space blank -->
<div style="clear: both;"></div>
<!-- Now in order to prevent the next div from floating beside the top ones,
we use `clear: both;`. This is like a wall, so now none of the div's
will be floated after this point. The container height will now also include the
height of these floated divs -->
<div></div>
</div>
Bạn cũng có thể thêm overflow: hidden;vào các phần tử container, nhưng tôi sẽ đề nghị bạn sử dụng clear: both;thay thế.
Ngoài ra nếu bạn có thể muốn tự xóa một yếu tố bạn có thể sử dụng
.self_clear:after {
content: "";
clear: both;
display: table;
}
CSS Float hoạt động như thế nào?
Phao chính xác là gì và nó làm gì?
Các floattài sản bị hiểu lầm bởi hầu hết người mới bắt đầu. Chà, chính xác thì floatlàm gì? Ban đầu, floattài sản được giới thiệu để chảy văn bản xung quanh hình ảnh, được thả nổi lefthoặc right. Đây là một lời giải thích khác của @Madara Uchicha.
Vì vậy, có sai không khi sử dụng floattài sản để đặt các hộp cạnh nhau? Câu trả lời là không ; không có vấn đề gì nếu bạn sử dụng thuộc floattính để đặt các hộp cạnh nhau.
Nổi một phần tử inlinehoặc blockmức sẽ làm cho phần tử hoạt động giống như một inline-blockphần tử.
Bản giới thiệuNếu bạn thả nổi một phần tử lefthoặc right, widthphần tử đó sẽ bị giới hạn ở nội dung mà nó chứa, trừ khi widthđược xác định rõ ràng ...
Bạn không thể floatlà một yếu tố center. Đây là vấn đề lớn nhất mà tôi luôn thấy với người mới bắt đầu, sử dụng float: center;floattài sản. floatthường được sử dụng để float/ di chuyển nội dung sang bên trái hoặc bên phải . Chỉ có bốn giá trị hợp lệ cho floatví dụ: tài sản left, right, none(mặc định) và inherit.
Phần tử cha mẹ sụp đổ, khi nó chứa các phần tử con nổi, để ngăn chặn điều này, chúng ta sử dụng thuộc clear: both;tính, để xóa các phần tử nổi ở cả hai bên, điều này sẽ ngăn chặn sự sụp đổ của phần tử cha. Để biết thêm thông tin, bạn có thể tham khảo câu trả lời khác của tôi ở đây .
(Quan trọng) Hãy nghĩ về nó nơi chúng ta có một chồng các yếu tố khác nhau. Khi chúng ta sử dụng float: left;hoặc float: right;phần tử di chuyển trên ngăn xếp một. Do đó, các phần tử trong luồng tài liệu thông thường sẽ ẩn đằng sau các phần tử nổi vì nó nằm ở cấp độ ngăn xếp trên các phần tử nổi thông thường. (Xin đừng liên hệ điều này với z-indexđiều đó là hoàn toàn khác nhau.)
Lấy một trường hợp làm ví dụ để giải thích cách hoạt động của CSS float, giả sử chúng ta cần bố cục 2 cột đơn giản với tiêu đề, chân trang và 2 cột, vì vậy đây là bản kế hoạch chi tiết ...
Trong ví dụ trên, chúng ta sẽ có nổi chỉ hộp màu đỏ, hoặc bạn có thể floatcho cả người left, hoặc bạn có thể floatvào left, và một để rightlà tốt, phụ thuộc vào cách bố trí, nếu đó là 3 cột, bạn có thể float2 cột để leftnơi khác một trong số rightđó phụ thuộc, mặc dù trong ví dụ này, chúng ta có bố cục 2 cột được đơn giản hóa, do đó, floatmột sẽ leftvà một khác cho right.
Đánh dấu và các kiểu để tạo bố cục được giải thích thêm ...
<div class="main_wrap">
<header>Header</header>
<div class="wrapper clear">
<div class="floated_left">
This<br />
is<br />
just<br />
a<br />
left<br />
floated<br />
column<br />
</div>
<div class="floated_right">
This<br />
is<br />
just<br />
a<br />
right<br />
floated<br />
column<br />
</div>
</div>
<footer>Footer</footer>
</div>
* {
-moz-box-sizing: border-box; /* Just for demo purpose */
-webkkit-box-sizing: border-box; /* Just for demo purpose */
box-sizing: border-box; /* Just for demo purpose */
margin: 0;
padding: 0;
}
.main_wrap {
margin: 20px;
border: 3px solid black;
width: 520px;
}
header, footer {
height: 50px;
border: 3px solid silver;
text-align: center;
line-height: 50px;
}
.wrapper {
border: 3px solid green;
}
.floated_left {
float: left;
width: 200px;
border: 3px solid red;
}
.floated_right {
float: right;
width: 300px;
border: 3px solid red;
}
.clear:after {
clear: both;
content: "";
display: table;
}
Hãy đi từng bước với cách bố trí và xem cách float hoạt động ..
Trước hết, chúng tôi sử dụng phần tử trình bao bọc chính, bạn có thể giả sử rằng đó là chế độ xem của bạn, sau đó chúng tôi sử dụng headervà gán một heightthứ 50pxkhông có gì lạ mắt ở đó. Nó chỉ là một phần tử mức khối không nổi bình thường sẽ chiếm 100%không gian ngang trừ khi nó nổi hoặc chúng ta gán inline-blockcho nó.
Giá trị hợp lệ đầu tiên cho floatlà leftnhư vậy trong ví dụ của chúng tôi, chúng tôi sử dụng float: left;cho .floated_left, vì vậy chúng tôi có ý định nổi một khối đến leftcác yếu tố container của chúng tôi.
Cột nổi bên trái
Và vâng, nếu bạn thấy, phần tử cha, .wrapperđược thu gọn, phần tử bạn nhìn thấy có viền màu xanh lá cây không mở rộng, nhưng nó có đúng không? Sẽ trở lại điều đó trong một thời gian, bây giờ, chúng tôi đã có một cột nổi left.
Đến với cột thứ hai, hãy để nó ở cột floatnàyright
Một cột khác trôi nổi bên phải
Ở đây, chúng ta có một 300pxcột rộng mà chúng tôi floatđến right, mà sẽ ngồi bên cạnh cột đầu tiên làm nó nổi đến left, và vì nó nổi đến left, nó tạo ra máng xối rỗng vào right, và kể từ đó đã phong phú của không gian trên right, chúng tôi rightyếu tố nổi ngồi hoàn hảo bên cạnh leftmột.
Tuy nhiên, phần tử cha bị thu gọn, tốt, chúng ta hãy sửa nó ngay bây giờ. Có nhiều cách để ngăn chặn phần tử cha khỏi bị sụp đổ.
- Thêm một phần tử mức khối trống và sử dụng
clear: both;trước khi phần tử cha kết thúc, chứa các phần tử nổi, bây giờ đây là một giải pháp rẻ tiền cho clearcác phần tử nổi của bạn sẽ thực hiện công việc cho bạn, nhưng tôi khuyên bạn không nên sử dụng phần tử này.
Thêm, <div style="clear: both;"></div>trước khi .wrapper divkết thúc, như
<div class="wrapper clear">
<!-- Floated columns -->
<div style="clear: both;"></div>
</div>
Bản giới thiệu
Chà, nó sửa rất tốt, không bị sập cha mẹ nữa, nhưng nó thêm đánh dấu không cần thiết vào DOM, vì vậy một số gợi ý, để sử dụng overflow: hidden;trên phần tử cha giữ các phần tử con nổi hoạt động như dự định.
Sử dụng overflow: hidden;trên.wrapper
.wrapper {
border: 3px solid green;
overflow: hidden;
}
Bản giới thiệu
Điều đó tiết kiệm cho chúng tôi một yếu tố mỗi khi chúng tôi cần clear floatnhưng khi tôi thử nghiệm nhiều trường hợp khác nhau, nó đã thất bại ở một box-shadowyếu tố cụ thể, sử dụng trên các yếu tố con.
Bản trình diễn (Không thể nhìn thấy bóng trên cả 4 mặt,overflow: hidden;gây ra sự cố này)
Giờ thì sao? Lưu một phần tử, không overflow: hidden;cần phải sửa lỗi rõ ràng, sử dụng đoạn mã dưới đây trong CSS của bạn và giống như khi bạn sử dụng overflow: hidden;phần tử cha, hãy gọi phần tử classbên dưới vào phần tử cha để tự xóa.
.clear:after {
clear: both;
content: "";
display: table;
}
<div class="wrapper clear">
<!-- Floated Elements -->
</div>
Bản giới thiệu
Ở đây, bóng hoạt động như dự định, đồng thời, nó tự xóa phần tử cha ngăn chặn thu gọn.
Và cuối cùng, chúng tôi sử dụng chân trang sau khi chúng tôi clearcác yếu tố nổi.
Bản giới thiệu
Khi nào được float: none;sử dụng, vì nó là mặc định, vì vậy sử dụng để khai báo float: none;?
Chà, điều đó còn tùy thuộc, nếu bạn định thiết kế đáp ứng, bạn sẽ sử dụng giá trị này rất nhiều lần, khi bạn muốn các phần tử nổi của mình hiển thị bên dưới một độ phân giải nhất định. Đối với float: none;tài sản đó đóng một vai trò quan trọng đó.
Vài ví dụ thực tế về cách floathữu ích.
- Ví dụ đầu tiên chúng ta đã thấy là tạo một hoặc nhiều bố cục cột.
- Sử dụng
imgnổi bên trong psẽ cho phép nội dung của chúng tôi chảy xung quanh.
Bản demo (Không nổiimg)
Bản demo 2 (imgthả nổi đếnleft)
- Sử dụng
floatđể tạo menu ngang - Demo
Nổi phần tử thứ hai là tốt, hoặc sử dụng `lề`
Cuối cùng nhưng không kém phần quan trọng, tôi muốn giải thích trường hợp cụ thể này khi bạn floatchỉ có một yếu tố duy nhất leftnhưng bạn không phải floatlà yếu tố khác, vậy chuyện gì xảy ra?
Giả sử nếu chúng ta loại bỏ float: right;khỏi chúng ta .floated_right class, divnó sẽ được hiển thị từ mức cực đoan leftvì nó không trôi nổi.
Bản giới thiệu
Vì vậy, trong trường hợp này, hoặc là bạn có thể floatđể các leftcũng
HOẶC LÀ
Bạn có thể sử dụng margin-leftsẽ bằng với kích thước của cột nổi bên trái tức là 200pxrộng .