float

Try it

float: none;

float: left;

float: right;

float: inline-start;

float: inline-end;

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">Float me</div>
    As much mud in the streets as if the waters had but newly retired from the
    face of the earth, and it would not be wonderful to meet a Megalosaurus,
    forty feet long or so, waddling like an elephantine lizard up Holborn Hill.
  </div>
</section>

.example-container {
  border: 1px solid #c5c5c5;
  padding: 0.75em;
  text-align: left;
  width: 80%;
  line-height: normal;
}

#example-element {
  border: solid 10px #efac09;
  background-color: #040d46;
  color: white;
  padding: 1em;
  width: 40%;
}

Phần tử float là phần tử có giá trị tính toán của float khác none.

Vì float ngụ ý sử dụng bố cục khối, nó thay đổi giá trị tính toán của các giá trị display trong một số trường hợp:

Cú pháp

/* Giá trị từ khóa */
float: left;
float: right;
float: none;
float: inline-start;
float: inline-end;

/* Giá trị toàn cục */
float: inherit;
float: initial;
float: revert;
float: revert-layer;
float: unset;

Thuộc tính float được xác định bằng một từ khóa duy nhất, chọn từ danh sách giá trị dưới đây.

Giá trị

left

Phần tử phải float sang phía trái của khối chứa.

right

Phần tử phải float sang phía phải của khối chứa.

none

Phần tử không được float.

inline-start

Phần tử phải float về phía đầu của khối chứa. Đó là phía trái với văn bản ltr và phía phải với văn bản rtl.

inline-end

Phần tử phải float về phía cuối của khối chứa. Đó là phía phải với văn bản ltr và phía trái với văn bản rtl.

Định nghĩa hình thức

Cú pháp hình thức

float = 
  block-start      |
  block-end        |
  inline-start     |
  inline-end       |
  snap-block       |
  <snap-block()>   |
  snap-inline      |
  <snap-inline()>  |
  left             |
  right            |
  top              |
  bottom           |
  none             |
  footnote         

<snap-block()> = 
  snap-block( <length> , [ start | end | near ]? )  

<snap-inline()> = 
  snap-inline( <length> , [ left | right | near ]? )  

Ví dụ

Cách định vị các phần tử float

Như đã đề cập ở trên, khi một phần tử được float, nó được lấy ra khỏi luồng bình thường của tài liệu (nhưng vẫn là một phần của nó). Nó được dịch chuyển sang trái hoặc phải cho đến khi chạm vào cạnh hộp chứa, hoặc một phần tử float khác.

Trong ví dụ này, có ba hình vuông màu. Hai hình float sang trái và một hình float sang phải. Lưu ý rằng hình vuông "trái" thứ hai được đặt sang phải của hình vuông đầu tiên. Các hình vuông bổ sung sẽ tiếp tục xếp sang phải, cho đến khi lấp đầy hộp chứa, sau đó sẽ bao sang dòng tiếp theo.

Một phần tử float có chiều cao ít nhất bằng chiều cao của các float lồng trong cao nhất. Chúng ta đã đặt width: 100% cho phần tử cha và float nó để đảm bảo nó đủ cao để bao gồm các float con, và để đảm bảo nó chiếm chiều rộng của phần tử cha để chúng ta không phải xóa phần tử anh em liền kề của nó.

HTML

<section>
  <div class="left">1</div>
  <div class="left">2</div>
  <div class="right">3</div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tristique
    sapien ac erat tincidunt, sit amet dignissim lectus vulputate. Donec id
    iaculis velit. Aliquam vel malesuada erat. Praesent non magna ac massa
    aliquet tincidunt vel in massa. Phasellus feugiat est vel leo finibus
    congue.
  </p>
</section>

CSS

section {
  box-sizing: border-box;
  border: 1px solid blue;
  width: 100%;
  float: left;
}

div {
  margin: 5px;
  width: 50px;
  height: 150px;
}

.left {
  float: left;
  background: pink;
}

.right {
  float: right;
  background: cyan;
}

Kết quả

Xóa float

Đôi khi bạn có thể muốn buộc một item di chuyển xuống dưới bất kỳ phần tử float nào. Ví dụ, bạn có thể muốn các đoạn văn nằm bên cạnh các float, nhưng buộc tiêu đề nằm trên dòng riêng của chúng. Xem clear để biết ví dụ.

Đặc tả

Tương thích trình duyệt

Xem thêm

• Block formatting context
• Sử dụng clear để buộc một item di chuyển xuống dưới phần tử float.