Thứ Hai, 15 tháng 6, 2015

Float và Clear trong CSS

11:27 0 Comment
Float và Clear trong CSS là hai chức năng vô cùng quan trọng trong việc thiết kế và bố cục giao diện bằng CSS.

1. Float 
Float cho phép chúng ta thiết lập vị trí của một thành phần theo chiều ngang (trái-phải) và tách phần đó ra khỏi cách hiển thị thông thường để tạo phần trống cho các phần sau tràn lên.

Cú pháp
float: gia_trị
Trong đó giá_tri là các giá trị của thuộc tính float.

Các giá trị của thuộc tính float

  • left : Thành phần được bố cục sang bên trái.
  • right : Thành phần được bố cục sang bên phải.
  • none : Thành phần không được bố cục (Mặc định).
  • inherit : Thành phần được thừa hưởng thuộc tính float từ thành phần cha (thành phần bao ngoài).

Ví dụ: Tạo một văn bản HTML bao gồm 1 hình ảnh và một đoạn văn. Sau đó float : left cho hình ảnh.
<!DOCTYPE HTML>
<html>
 <head>
  <style>
   #img{
     float:left;
   }
  </style>
 </head>
 <body>
  <img id="img" src="anh.jpg" />
  <p>
    Nội dung đoạn văn...
  </p>
 </body>
</html>
* Nếu không có thuộc tính float: left. Khi thực thi chương trình trên đoạn văn bản sẽ nằm ở dưới hình ảnh.

* Nếu có thuộc tính float: left. Khi thực thi chương trình trên đoạn văn bản sẽ nằm ở bên phải hình ảnh.

2. Clear
Thuộc tính clear luôn đi chung với thuộc tính float. Nó sử dụng để ngăn cản việc tràn lên của một nội dung bất kỳ.

Cú pháp
clear: gia_trị
Trong đó giá_tri là các giá trị của thuộc tính clear.

Các giá trị của thuộc tính clear

  • left : Thành phần không được float bên trái.
  • right : Thành phần không được float bên phải.
  • both : Thành phần không được float cả 2 bên.
  • none : Thành phần không được clear (Mặc định).
  • inherit : Thành phần được thừa hưởng thuộc tính clear từ thành phần cha (thành phần bao ngoài).

Ví dụ: Thêm một đoạn văn có id=”cle” vào văn bản HTML được khởi tạo ở ví dụ trên. Và sử dụng clear:both cho nó.
<!DOCTYPE HTML>
<html>
 <head>
  <style>
   #img{
     float:left;
   }
   #cle{
     clear:both;
   }
  </style>
 </head>
 <body>
  <img id="img" src="anh.jpg" />
  <p>
    Nội dung đoạn văn bị tràn lên...
  </p>
  <p id="cle">
    Nội dung đoặn văn được clear...
  </p>
 </body>
</html>
* Nếu không có thuộc tính clear: both. Khi thực thi chương trình trên đoạn văn bản sẽ nằm ở bên phải hình ảnh và dưới đoạn văn thứ nhất.

* Nếu có thuộc tính clear: both. Khi thực thi chương trình trên đoạn văn bản sẽ nằm ở dưới hình ảnh và đoạn văn thứ nhất.

Tham khảo: Khóa học lap trinh php từ A-> Z
Nguồn: the gioi web

SHARE THIS

0 nhận xét:

Lưu ý: Chỉ thành viên của blog này mới được đăng nhận xét.