Nổi CSS

Khung trôi có thể di chuyển sang trái hoặc sang phải cho đến khi cạnh ngoài của nó chạm vào cạnh của khung bao gồm hoặc khung trôi khác.

Do khung trôi không ở trong luồng văn bản thông thường của tài liệu, vì vậy các khung văn bản trong luồng văn bản thông thường của tài liệu sẽ表现得 như khung trôi không có.

Nổi CSS

Xin xem hình dưới đây, khi khung 1 trôi sang phải, nó sẽ rời khỏi luồng văn bản và di chuyển sang phải cho đến khi cạnh phải của nó chạm vào cạnh phải của khung bao gồm:

CSS ví dụ về nổi - phần tử nổi sang phải

Xin xem hình dưới đây, khi khung 1 trôi sang trái, nó sẽ rời khỏi luồng văn bản và di chuyển sang trái cho đến khi cạnh trái của nó chạm vào cạnh trái của khung bao gồm. Bởi vì nó không còn ở trong luồng văn bản, nó không chiếm không gian, thực tế là che盖住了 khung 2, làm khung 2 biến mất khỏi tầm nhìn.

Nếu di chuyển tất cả ba khung sang trái, thì khung 1 sẽ trôi sang trái cho đến khi chạm vào khung bao gồm, hai khung còn lại sẽ trôi sang trái cho đến khi chạm vào khung trôi trước đó.

CSS ví dụ về nổi - phần tử nổi sang trái

Như hình dưới đây, nếu khung bao gồm quá hẹp để chứa ba phần tử trôi theo hướng ngang, thì các khung trôi khác sẽ di chuyển xuống cho đến khi có đủ không gian. Nếu chiều cao của các phần tử trôi khác nhau, chúng có thể bị kẹt khi di chuyển xuống do các phần tử trôi khác:

CSS ví dụ về nổi 2 - phần tử nổi sang trái

Thuộc tính nổi float CSS

Trong CSS, chúng ta thực hiện trôi của phần tử thông qua thuộc tính float.

Nếu cần thêm thông tin về thuộc tính float, hãy truy cập vào tài liệu tham khảo:Thuộc tính nổi float CSS。

Khung văn bản và làm sạch

Khung văn bản bên cạnh khung trôi sẽ bị rút ngắn, để tạo không gian cho khung trôi, khung văn bản bao quanh khung trôi.

Do đó, tạo khung trôi có thể làm văn bản bao quanh hình ảnh:

hộp dòng bao quanh hộp nổi

Để ngăn chặn khung văn bản bao quanh khung trôi, cần áp dụng đối với khung đó Thuộc tính clearGiá trị của thuộc tính clear có thể là left, right, both hoặc none, nó biểu thị các cạnh nào của khung không nên挨 proximity với khung trôi.

Để đạt được hiệu ứng này, trong phần tử được làm sạch củacanh trên ngoài viềnthêm đủ không gian để cạnh trên của phần tử垂直 xuống dưới khung trôi:

ví dụ về thuộc tính clear - áp dụng clear cho hộp dòng

Đây là một công cụ hữu ích, giúp các phần tử xung quanh để lại không gian cho phần tử trôi.

Hãy xem xét kỹ hơn về trôi và làm sạch. Giả sử bạn muốn một hình ảnh trôi sang bên trái của khối văn bản, và bạn muốn hình ảnh và văn bản được bao gồm trong một phần tử có màu nền và viền.

.news {
  background-color: gray;
  border: solid 1px black;
  }
.news img {
  float: left;
  }
.news p {
  float: right;
  }
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>

Trong trường hợp này, đã xuất hiện một vấn đề. Vì phần tử trôi đã rời khỏi luồng tài liệu, nên div bao quanh hình ảnh và văn bản không chiếm không gian.

Làm thế nào để phần tử bao quanh được bao quanh phần tử trôi về mặt視 giác? Cần áp dụng clear ở một nơi nào đó trong phần tử này:

ví dụ về thuộc tính clear - áp dụng làm sạch cho phần tử trống

Thật không may, đã xuất hiện một vấn đề mới, vì không có phần tử nào có thể áp dụng làm sạch,所以我们 chỉ có thể thêm một phần tử trống và làm sạch nó.

.news {
  background-color: gray;
  border: solid 1px black;
  }
.news img {
  float: left;
  }
.news p {
  float: right;
  }
.clear {
  clear: both;
  }
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="clear"></div>
</div>

Sẽ đạt được hiệu ứng mà chúng ta mong muốn, nhưng cần thêm mã không cần thiết. Thường có các phần tử có thể áp dụng clear, nhưng có khi phải thêm các thẻ không có ý nghĩa để thực hiện布局.

Nhưng chúng ta vẫn có một cách khác, đó là trôi div chứa:

.news {
  background-color: gray;
  border: solid 1px black;
  float: left;
  }
.news img {
  float: left;
  }
.news p {
  float: right;
  }
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>

Sẽ có được hiệu ứng mà chúng ta mong muốn. Tuy nhiên, phần tử tiếp theo sẽ bị ảnh hưởng bởi phần tử trôi này. Để giải quyết vấn đề này, một số người chọn trôi tất cả các thành phần trong布局, sau đó sử dụng các phần tử có ý nghĩa phù hợp (thường là chân trang của trang web) để làm sạch các phần tử trôi. Điều này giúp giảm hoặc loại bỏ các thẻ không cần thiết.

Thực tế, tất cả các trang web trên trang CodeW3C.com đều sử dụng công nghệ này. Nếu bạn mở tệp CSS của chúng ta, bạn sẽ thấy rằng chúng ta đã làm sạch div chân trang, và ba div ở trên chân trang đều trôi sang trái.

Thuộc tính clear CSS

Chúng ta vừa rồi đã thảo luận chi tiết về nguyên lý hoạt động của việc làm sạch CSS và cách áp dụng thuộc tính clear. Nếu bạn muốn học thêm về thuộc tính clear, hãy truy cập vào tài liệu tham khảo:Thuộc tính clear CSS。

Ví dụ nổi và làm sạch

Áp dụng đơn giản thuộc tính nổi
Làm nổi hình ảnh ở bên phải của một đoạn văn.
Làm nổi hình ảnh có viền và cạnh ở bên phải của đoạn văn
Làm nổi hình ảnh ở bên phải của đoạn văn. Thêm viền và cạnh cho hình ảnh.
Hình ảnh có tiêu đề nổi ở bên phải
Làm nổi hình ảnh có tiêu đề ở bên phải
Làm nổi đầu tiên của đoạn văn ở bên trái
Làm nổi đầu tiên của đoạn văn ở bên trái và thêm phong cách cho chữ cái đó.
Tạo menu ngang
Sử dụng nổi với liên kết một cột để tạo menu ngang.
Tạo trang chủ không có bảng
Sử dụng nổi để tạo trang chủ có tiêu đề, chân trang, danh mục bên trái và nội dung chính.
Làm sạch phần bên cạnh của phần tử
Ví dụ này minh họa cách sử dụng phần tử nổi để làm sạch phần bên cạnh của phần tử.