293

Quy tắc CSS sau đây làm gì:

.clear { clear: both; }

Và tại sao chúng ta cần sử dụng nó?

css css-float

— Peter Mortensen
nguồn

22

Khi bạn đang sử dụng CSS floatvà muốn phần tử tiếp theo bên dưới, không phải ở bên phải hoặc bên trái.

— Riz

Không có phần tử nổi nào được phép ở bên trái và bên phải của một phần tử được chỉ định khi phần tử được sử dụng rõ ràng: cả hai

— JackXu

687

Tôi sẽ không giải thích làm thế nào các phao hoạt động ở đây (chi tiết), vì câu hỏi này thường tập trung vào Tại sao sử dụng clear: both;HOẶC clear: both;chính xác làm gì ...

Tôi sẽ giữ câu trả lời này đơn giản, và cho điểm, và sẽ giải thích cho bạn bằng đồ họa tại sao lại clear: both;bắt buộc hoặc nó làm gì ...

Nói chung, các nhà thiết kế nổi các phần tử, bên trái hoặc bên phải, điều này tạo ra một không gian trống ở phía bên kia cho phép các phần tử khác chiếm không gian còn lại.

Tại sao họ nổi các yếu tố?

Các phần tử được thả nổi khi người thiết kế cần 2 phần tử mức khối cạnh nhau. Ví dụ: chúng tôi muốn thiết kế một trang web cơ bản có bố cục như bên dưới ...

nhập mô tả hình ảnh ở đây

Ví dụ trực tiếp của hình ảnh demo.

Mã cho bản demo

Hiển thị đoạn mã

/*  CSS:  */

* { /* Not related to floats / clear both, used it for demo purpose only */
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

header, footer {
    border: 5px solid #000;
    height: 100px;
}

aside {
    float: left;
    width: 30%;
    border: 5px solid #000;
    height: 300px;
}

section {
    float: left;
    width: 70%;
    border: 5px solid #000;
    height: 300px;
}

.clear {
    clear: both;
}

<!-- HTML -->
<header>
    Header
</header>
<aside>
    Aside (Floated Left)
</aside>
<section>
    Content (Floated Left, Can Be Floated To Right As Well)
</section>
<!-- Clearing Floating Elements-->
<div class="clear"></div>
<footer>
    Footer
</footer>

Mở rộng đoạn trích

Lưu ý: Bạn có thể phải thêm header, footer, aside, section(và các yếu tố HTML5 khác) như display: block;trong stylesheet của bạn cho rõ ràng đề cập rằng các yếu tố là những yếu tố khối cấp.

Giải trình:

Tôi có bố cục cơ bản, 1 tiêu đề, 1 thanh bên, 1 khu vực nội dung và 1 chân trang.

Không có dấu phẩy nào header, tiếp theo là asidethẻ tôi sẽ sử dụng cho thanh bên trang web của mình, vì vậy tôi sẽ thả phần tử sang trái.

Lưu ý: Theo mặc định, phần tử cấp khối chiếm tài liệu 100% chiều rộng, nhưng khi nổi sang trái hoặc phải, nó sẽ thay đổi kích thước theo nội dung mà nó giữ.

Vì vậy, như bạn lưu ý, phần nổi bên trái divđể không gian bên phải không được sử dụng, điều này sẽ cho phép phần divsau thay đổi trong phần còn lại.

Ok, đây là cách các phần tử mức khối hoạt động khi nổi bên trái hoặc bên phải, vậy bây giờ tại sao lại được clear: both;yêu cầu và tại sao?

Vì vậy, nếu bạn lưu ý trong bản demo bố cục - trong trường hợp bạn quên, đây là ..

Tôi đang sử dụng một lớp được gọi .clearvà nó giữ một thuộc tính được gọi clearvới giá trị là both. Vì vậy, hãy xem tại sao nó cần both.

Tôi đã trôi nổi asidevà sectioncác yếu tố ở bên trái, vì vậy hãy giả sử một kịch bản, nơi chúng ta có một hồ bơi, nơi headercó đất liền asidevà sectionđang trôi nổi trong hồ bơi và chân trang lại là vùng đất rắn, đại loại như thế này ..

Chế độ xem nổi

Vì vậy, nước trong xanh không biết khu vực của các phần tử nổi là gì, chúng có thể lớn hơn bể bơi hoặc nhỏ hơn, do đó, đây là một vấn đề phổ biến gây rắc rối cho 90% người mới bắt đầu CSS: tại sao nền của phần tử container không được kéo dài khi nó giữ các phần tử nổi. Đó là bởi vì phần tử container là một POOL ở đây và POOL không biết có bao nhiêu vật thể nổi, hoặc chiều dài hoặc chiều rộng của các phần tử nổi là gì, vì vậy nó chỉ đơn giản là không kéo dài.

(Tham khảo phần ^[Clearfix] của câu trả lời này để biết cách làm gọn gàng. Tôi đang sử dụng một divví dụ trống có chủ đích cho mục đích giải thích)

Tôi đã cung cấp 3 ví dụ ở trên, thứ nhất là luồng tài liệu bình thường trong đó rednền sẽ hiển thị như mong đợi vì container không chứa bất kỳ đối tượng nổi nào.

Trong ví dụ thứ hai, khi đối tượng được thả sang trái, phần tử container (POOL) sẽ không biết kích thước của các phần tử nổi và do đó nó sẽ không kéo dài đến chiều cao của phần tử nổi.

nhập mô tả hình ảnh ở đây

Sau khi sử dụng clear: both;, phần tử container sẽ được kéo dài theo kích thước phần tử nổi của nó.

nhập mô tả hình ảnh ở đây

Một lý do khác clear: both;được sử dụng là để ngăn phần tử dịch chuyển lên trong không gian còn lại.

Giả sử bạn muốn 2 phần tử cạnh nhau và một phần tử khác bên dưới chúng ... Vì vậy, bạn sẽ thả 2 phần tử sang trái và bạn muốn phần tử bên dưới chúng.

Ví dụ 1

nhập mô tả hình ảnh ở đây

Ví dụ thứ 2

nhập mô tả hình ảnh ở đây

Cuối cùng nhưng không kém phần quan trọng, footerthẻ sẽ được hiển thị sau các phần tử nổi khi tôi đã sử dụng clearlớp trước khi khai báo footercác thẻ của mình , điều này đảm bảo rằng tất cả các phần tử nổi (trái / phải) sẽ bị xóa cho đến thời điểm đó.

Xóa

Đến với Clearfix có liên quan đến phao. Như đã được @Elky chỉ định , cách chúng tôi xóa các số float này không phải là một cách rõ ràng để làm điều đó vì chúng tôi đang sử dụng một divphần tử trống không phải là một divphần tử dành cho. Do đó ở đây có tiền tố.

Hãy nghĩ về nó như một yếu tố ảo sẽ tạo ra một yếu tố trống cho bạn trước khi yếu tố cha mẹ của bạn kết thúc. Điều này sẽ tự xóa phần tử bao bọc của bạn giữ các phần tử nổi. Phần tử này sẽ không tồn tại trong DOM của bạn theo nghĩa đen nhưng sẽ thực hiện công việc.

Để tự xóa bất kỳ phần tử trình bao bọc nào có các phần tử nổi, chúng ta có thể sử dụng

.wrapper_having_floated_elements:after {  /* Imaginary class name */
  content: "";
  clear: both;
  display: table;
}

Lưu ý :afteryếu tố giả được tôi sử dụng cho điều đó class. Điều đó sẽ tạo ra một phần tử ảo cho phần tử trình bao bọc ngay trước khi nó tự đóng. Nếu chúng ta nhìn vào dom bạn có thể thấy nó hiển thị như thế nào trong cây Tài liệu.

Vì vậy, nếu bạn thấy, nó được hiển thị sau khi con nổi div, trong đó chúng ta xóa các phao không có gì ngoài tương đương với một divphần tử trống với thuộc clear: both;tính mà chúng ta cũng đang sử dụng cho điều này. Bây giờ tại sao display: table;và contentnằm ngoài phạm vi câu trả lời này nhưng bạn có thể tìm hiểu thêm về yếu tố giả ở đây .

Lưu ý rằng điều này cũng sẽ hoạt động trong IE8 vì IE8 hỗ trợ :aftergiả .

Câu trả lời gốc:

Hầu hết các nhà phát triển thả nội dung của họ sang trái hoặc phải trên trang của họ, có thể là div giữ logo, thanh bên, nội dung, v.v., các div này được thả sang trái hoặc phải, khiến phần còn lại của không gian không được sử dụng và do đó nếu bạn đặt các thùng chứa khác, nó sẽ trôi nổi trong không gian còn lại, vì vậy để ngăn chặn việc clear: both;sử dụng, nó sẽ xóa tất cả các phần tử nổi bên trái hoặc bên phải.

Trình diễn:

------------------ ----------------------------------
div1(Floated Left) Other div takes up the space here
------------------ ----------------------------------

Bây giờ nếu bạn muốn làm cho div khác hiển thị bên dưới div1, thì bạn sẽ sử dụng clear: both;nó để đảm bảo bạn xóa tất cả các float, trái hoặc phải

------------------
div1(Floated Left)
------------------
<div style="clear: both;"><!--This <div> acts as a separator--></div>
----------------------------------
Other div renders here now
----------------------------------

— Ông ngoài hành tinh
nguồn

3

Nếu bạn chưa bao giờ nghe về phao, tôi khuyên bạn trước tiên nên đọc phần giới thiệu về phao --- ví dụ, hãy xem liên kết trong câu trả lời tiếp theo. Sau đó quay lại và đọc câu trả lời này - nó sẽ có ý nghĩa.

— osa

37

Hãy lưu ý, phao ban đầu không được phát minh để có hai thành phần cấp khối cạnh nhau, đó chỉ là tác dụng phụ! Mục đích ban đầu là cho phép văn bản chảy xung quanh hình ảnh, vì vậy bạn thả hình ảnh theo một trong hai hướng.

— Madara's Ghost

3

Câu trả lời ngắn liên quan để tham khảo trước khi đọc bài này, chỉ để có một ý tưởng chung .. stackoverflow.com/questions/16568272/ Kẻ

— Ông Alien

@ mr-Alien Ví dụ hay, tuy nhiên trong trường hợp jsfiddle.net/N82UD/1 khi bạn thu nhỏ màn hình, có một vấn đề với float và phần tử "xóa" không theo dòng chảy: jsfiddle.net/N82UD/138 Nó chiếm không gian của mục nổi 2

— Omar

1

@Carlo: Một thay thế được sử dụng rất nhiều trong các mẫu như Twitter Bootstrap chẳng hạn; là để đặt display: inline-blockmột phần tử, và trên cha mẹ bạn có thể sử dụng text-align: left, text-align: centerhoặc text-align: rightví dụ.

— Daan

39

Các clearbất động sản chỉ ra rằng trái, phải hoặc cả hai bên của một phần tử không thể tiếp giáp với các yếu tố đầu nổi trong bối cảnh định dạng cùng một khối. Các phần tử đã xóa được đẩy xuống dưới các phần tử nổi tương ứng. Ví dụ:

`clear: none;` Phần tử vẫn liền kề với phần tử nổi

Hiển thị đoạn mã

body {
  font-family: monospace;
  background: #EEE;
}
.float-left {
  float: left;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.float-right {
  float: right;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.clear-none {
  clear: none;
  background: #FFF;
}

<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-none">clear: none;</div>

Mở rộng đoạn trích

`clear: left;` Phần tử đẩy bên dưới phần tử nổi bên trái

Hiển thị đoạn mã

body {
  font-family: monospace;
  background: #EEE;
}
.float-left {
  float: left;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.float-right {
  float: right;
  width: 60px;
  height: 120px;
  background: #CEF;
}
.clear-left {
  clear: left;
  background: #FFF;
}

<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-left">clear: left;</div>

Mở rộng đoạn trích

`clear: right;` Phần tử đẩy bên dưới phần tử nổi bên phải

Hiển thị đoạn mã

body {
  font-family: monospace;
  background: #EEE;
}
.float-left {
  float: left;
  width: 60px;
  height: 120px;
  background: #CEF;
}
.float-right {
  float: right;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.clear-right {
  clear: right;
  background: #FFF;
}

<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-right">clear: right;</div>

Mở rộng đoạn trích

`clear: both;` Phần tử được đẩy xuống dưới tất cả các phần tử nổi

Hiển thị đoạn mã

body {
  font-family: monospace;
  background: #EEE;
}
.float-left {
  float: left;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.float-right {
  float: right;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.clear-both {
  clear: both;
  background: #FFF;
}

<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-both">clear: both;</div>

Mở rộng đoạn trích

`clear` không ảnh hưởng đến số float bên ngoài bối cảnh định dạng khối hiện tại

Hiển thị đoạn mã

body {
  font-family: monospace;
  background: #EEE;
}
.float-left {
  float: left;
  width: 60px;
  height: 120px;
  background: #CEF;
}
.inline-block {
  display: inline-block;
  background: #BDF;
}
.inline-block .float-left {
  height: 60px;
}
.clear-both {
  clear: both;
  background: #FFF;
}

<div class="float-left">float: left;</div>
<div class="inline-block">
  <div>display: inline-block;</div>
  <div class="float-left">float: left;</div>
  <div class="clear-both">clear: both;</div>
</div>

Mở rộng đoạn trích

— Salman A
nguồn

1

Thông minh. Đây là câu trả lời tốt nhất. Tôi tự hỏi tại sao một câu trả lời khác được chấp nhận.

— sawa

Điều gì sẽ xảy ra nếu chúng ta xóa thuộc tính display: inline-block;css khỏi kịch bản này? Nó sẽ kéo dài inline-blockphần tử cha thành phần tử anh chị em có lớp float-left. Điều này làm cho câu lệnh "xóa không ảnh hưởng đến số float bên ngoài ngữ cảnh định dạng khối hiện tại" sai. Ai đó có thể giải thích?

— Sashrika Waidyarathna

@SashrikaWaidyarathna: một phần tử cha không nhất thiết phải tạo bối cảnh định dạng khối cho con của nó. Trong ví dụ của bạn (a) loại bỏ display: inline-blockcó nghĩa là nó không còn tạo ra bối cảnh định dạng khối (b) các float / xóa bên trong phần tử đó và float đầu tiên đều trở thành một phần của bối cảnh định dạng khối giống nhau (khung nhìn).

— Salman A

@SalmanA, cảm ơn bạn đã giải thích về đặc tả css. Tôi đã không nhận thức được định nghĩa của bối cảnh định dạng khối.

— Sashrika Waidyarathna

2

Sundar Pichai doppelganger?

— Manoj Kumar

23

CSS nổi và rõ ràng

Fiddle mẫu

Chỉ cần cố gắng loại bỏ clear:bothtài sản khỏi divvới class samplevà xem làm thế nào nó trôi nổi divs.

— Giải thưởng Paty
nguồn

13

Câu trả lời của ông Alien là hoàn hảo, nhưng dù sao tôi cũng không khuyên bạn nên sử dụng <div class="clear"></div>vì đây chỉ là một bản hack khiến cho việc đánh dấu của bạn bị bẩn. Điều này là vô dụng trống divvề cấu trúc xấu và ngữ nghĩa, điều này cũng làm cho mã của bạn không linh hoạt. Trong một số trình duyệt, div này gây ra chiều cao bổ sung và bạn phải thêm height: 0;cái nào tệ hơn nữa. Nhưng những rắc rối thực sự bắt đầu khi bạn muốn thêm nền hoặc đường viền xung quanh các yếu tố nổi của mình - nó sẽ sụp đổ vì web được thiết kế xấu . Tôi khuyên bạn nên quấn yếu tố nổi vào container trong đó có clearfix quy tắc CSS. Đây cũng là hack, nhưng đẹp, linh hoạt hơn để sử dụng và có thể đọc được cho robot người và SEO.

— elky
nguồn

Bài đăng khác này có thêm thông tin chi tiết về clearfix: stackoverflow.com/questions/211383/ Kẻ

— Bill Hoag

2

Khi bạn muốn một phần tử được đặt ở dưới cùng phần tử khác, bạn sử dụng mã này trong CSS. Nó được sử dụng cho phao.

Nếu bạn thả nổi nội dung, bạn có thể nổi sang trái hoặc phải ... vì vậy trong một bố cục chung, bạn có thể có một điều hướng bên trái, div nội dung và chân trang.

Để đảm bảo chân trang nằm dưới cả hai phao này (nếu bạn đã nổi trái và phải) thì bạn đặt chân trang là clear: both.

Bằng cách này, nó sẽ ở dưới cả hai phao.

(Nếu bạn chỉ xóa bên trái thì bạn chỉ thực sự cần clear: left;.)

Đi qua hướng dẫn này:

— Saeed
nguồn

3

Hướng dẫn gì?

— Peter Mortensen

Quy tắc CSS rõ ràng là gì: cả hai đều làm gì?

Tại sao họ nổi các yếu tố?

Giải trình:

Ví dụ 1

Ví dụ thứ 2

Xóa

Câu trả lời gốc:

Trình diễn:

clear: none; Phần tử vẫn liền kề với phần tử nổi

clear: left; Phần tử đẩy bên dưới phần tử nổi bên trái

clear: right; Phần tử đẩy bên dưới phần tử nổi bên phải

clear: both; Phần tử được đẩy xuống dưới tất cả các phần tử nổi

clear không ảnh hưởng đến số float bên ngoài bối cảnh định dạng khối hiện tại

`clear: none;` Phần tử vẫn liền kề với phần tử nổi

`clear: left;` Phần tử đẩy bên dưới phần tử nổi bên trái

`clear: right;` Phần tử đẩy bên dưới phần tử nổi bên phải

`clear: both;` Phần tử được đẩy xuống dưới tất cả các phần tử nổi

`clear` không ảnh hưởng đến số float bên ngoài bối cảnh định dạng khối hiện tại