Bài 13 – Float CSS

Home/Học viết code/CSS/Bài 13 – Float CSS

Những phần tử “Phao” (floats)

Một phần tử dược gán thuộc tính “phao” thì nó có thể được neo bên trái hoặc bên phải các dối tượng nhờ, đó là thuộc tính float. “Phao” ở đây để mô tả các phần tử có thể được neo dính vào một trong hai bên lề của trang hoặc hai bên lề của mô hình hộp chứa nó, hãy xem minh họa dưới đây:

figure015

Nếu bạn muốn một đoạn chữ bao quanh hình như ví dụ,  float sẽ giúp bạn thực thiện điều này:
Float figure

Thực hiện như thế nào?

Đây là đoạn HTML code của ví dụ ở hình trê


Để tạo cho bức ảnh nằm ở vị trí bên trái, bạn phải định cho nó có chiều ngang, ở ví dụ này chiều ngang sẽ là 150px, sau đó bạn sẽ thiết lập float bên trái – left cho id được gán vào phần tử div  :

#picture {
    float:left;
    width: 150px;
  }

Sử dụng để tạo cột – columns

Float cũng có thể để tạo thành cột trong trang web. Trước hết bạn phải cấu trúc các cột trong trang HTML bằng các phần tử <div> như dưới đây::

<div id="column1">
  <p>Haec disserens qua de re agatur
    et in quo causa consistat non videt...</p>
</div>

<div id="column2">
  <p>causas naturales et antecedentes,
    idciro etiam nostrarum voluntatum...</p>
</div>

<div id="column3">
  <p>nam nihil esset in nostra
    potestate si res ita se haberet...</p>
</div>

Tiếp theo bạn sẽ thiết lập độ rộng của các cột là 33%, sau đó hãy xếp các cột kế tiếp nhau theo bên trái bằng cách dùng thuộc tính float với giá trị là left
CSS

#column1 {
  float: left;
  width: 33%;
}

#column2 {
  float: left;
  width: 33%;
}

#column3 {
  float: left;
  width: 33%;
}

Xem ví dụ

float có thể xác định bằng các giá trị trái – left, phải – right or và không  none.

Thuộc tính clear

Thuộc tính  clear để thiết lập sự sắp xếp liên tục của các phần tử có thuộc tính  float

Mặc định, các phần tử ở cạnh sẽ tự động tràn vào chiếm chổ trống sát cạnh phần tử có thuộc tính  float . Bạn có thể thấy ở ví dụ trên, các dòng chữ đã tự động tràn lấp đầy chổ trống bên cạnh bức ảnh.

Thuộc tính clear có các giá trị trái – left, phải – right, đáy – both or và không –  none. về nguyên tắc nếu clear, được thiết lập ở cả hai cạnh của một phần tử, thì nó sẽ không đứng ngang hàng với bất kỳ phần tử nào, mà sẽ sắp chồng lên nhau.
HTML

<div id="picture">
  <img src="https://cdn6.thietke.website/wp-content/uploads/2014/11/bill.jpg" alt="Bill Gates">
</div>
<h1>Bill Gates</h1>
<p class="floatstop">đoạn chữ này được thiết lập clear cả hai cạnh</p>

CSS

#picture {
    float: left;
    width: 150px;
    }

.floatstop {
   clear: both;
  }

Xem ví dụ

Tổng kết

Float thường được sử dụng rộng rãi trong nhiều trường hợp để định vị trí các phần tử, bài tiếp theo chúng ta sẽ cùng xem xét làm thế nào xác định các vị trí bao gồm việc sử dụng giá trị tương đối – relative và tuyệt đối – absolute.

Facebook Comments
2020-09-20T11:15:30+00:00Tháng Mười Một 2, 2014|Categories: CSS|Tags: , , , |

Tác giả:

Xin chào, đây là Blog của Chung - chuyên trang tìm hiểu về ngành thiết kế web nói chung và các ngành thiết kế đồ họa liên quan. I'm a Freelance Web/Graphic Designer - Lecturer at University of Fine Arts, Hong Bang International University, Văn Lang University, Saigon University, Hong Bang International University, Nguyen Tat Thanh University.
Go to Top