Khái niệm về thuộc tính float
Thuộc tính float có tính năng đẩy thành phần sang bên trái hoặc bên phải .
Đẩy sang bên trái
Đẩy sang bên phải
Nó thường được vận dụng vào việc phong cách thiết kế bố cục tổng quan của website ( Layout )
WEB CƠ BẢN. việt nam
- HTML
- CSS
- JavaScript
- MySQL
- PHP
Phần nội dung
Phần quảng cáo
© năm nay Web cơ bản All Rights Reserved
Ở Layout phía trên, phần nằm giữa gồm ba khối : menu, nội dung, quảng cáo .
Thông thường, những thành phần khối sẽ mở màn trên một hàng mới. Nhưng ở đây, cả ba thành phần khối hoàn toàn có thể nằm trên cùng một hàng đó là nhờ vào thuộc tính float .
- Trước tiên, ta thiết lập khối menu chiều rộng 30% và đẩy nó sang trái. (Xem ví dụ)
- Tiếp theo, ta thiết lập khối nội dung chiều rộng 50% và đẩy nó sang trái (Nếu một phần tử được đẩy sang trái thì nó sẽ nối đuôi phần tử đứng trước nó). Do đó, khối nội dung sẽ được nằm cạnh khối menu (Xem ví dụ)
- Cuối cùng, còn dư 20% ta thiết lập cho khối quảng cáo và đẩy nó sang trái (Xem ví dụ)
Cách sử dụng thuộc tính float
– Cú pháp :
float: left | right | none | inherit;Trong đó :
- left: đẩy phần tử sang bên trái
- right: đẩy phần tử sang bên phải
- none: không thiết lập thuộc tính float (mặc định)
- inherit: kế thừa giá trị thuộc tính float của phần tử chứa nó
Ví dụ :
.abc { float:right;
}
.xyz { float:left;
}Xem ví dụ
Nguyên lý hoạt động của thuộc tính float
Nguyên lý 1:
Khi một thành phần được thiết lập thuộc tính float :
- Nó sẽ được bắt đầu ở hàng phía trên, nếu hàng phía trên còn đủ chỗ trống để chứa nó.
- Nó sẽ được bắt đầu ở hàng mới, nếu hàng phía trên không đủ chỗ trống để chứa nó (Xem ví dụ).
Lưu ý : Nếu một thành phần được thiết lập thuộc tính float mà trong khi thành phần đứng trước nó không được thiết lập thuộc tính float, thì mặc định nó được mở màn ở hàng mới ( Xem ví dụ )
Nguyên lý 2:
Theo nguyên tắc 1 tất cả chúng ta biết rằng : khi hàng không đủ chỗ chứa thành phần thì thành phần phải mở màn ở hàng mới. Tuy nhiên, cách khởi đầu như thế nào mới là quan trọng .
Khi trên một hàng có nhiều phần tử được thiết lập thuộc tính float và mỗi phần tử có chiều cao khác nhau, nếu hàng không đủ chỗ chứa phần tử thì phần tử sẽ bắt đầu bên cạnh phần tử có chiều cao thấp nhất và còn đủ khoảng trống để chứa nó (Xem ví dụ).
Tắt sự ảnh hưởng của thuộc tính float
Nếu một thành phần được thiết lập thuộc tính float, trong khi thành phần nằm phía sau nó không được thiết lập thuộc tính float, thì khi đó thành phần nằm phía sau sẽ bị ảnh hưởng tác động xấu bởi thuộc tính float ( Xem ví dụ )
Để khắc phục yếu tố này, ta thêm thuộc tính clear vào thành phần phía sau theo cú pháp :
clear: none | left | right | both | inherit;Trong đó :
- none: cho phép phần tử chịu sự ảnh hưởng của thuộc tính float
- left: không bị ảnh hưởng bởi thuộc tính float left
- right: không bị ảnh hưởng bởi thuộc tính float right
- both: không bị ảnh hưởng bởi thuộc tính float
- inherit: kế thừa giá trị thuộc tính clear của phần tử chứa nó
Ví dụ :
p { clear:both;
}Xem ví dụ
Chống tràn phần tử
Nếu một thành phần được thiết lập thuộc tính float và có size lớn hơn thành phần chứa nó thì khi đó thành phần sẽ bị tràn ra khỏi thành phần chứa nó .
Để khắc phục yếu tố này, ta thêm thuộc tính overflow : auto vào thành phần chứa nó .
Ví dụ :
.container { overflow: auto;
}Xem ví dụ
Thiết kế một Layout đơn giản
WEB CƠ BẢN
Hướng dẫn học lập trình web từ cơ bản đến nâng cao
TẤT CẢ NGÔN NGỮ
- Học HTML
- Học CSS
- Học JavaScript
- Học PHP
- Học MySQL
- Học Codeigniter
Thuộc tính Float trong CSS
Thuộc tính float có tính năng đẩy thành phần sang bên trái hoặc bên phải. Nó thường được vận dụng vào việc phong cách thiết kế bố cục tổng quan của website ( Layout ). Ở Layout phía trên, phần nằm giữa gồm ba khối : menu, nội dung, quảng cáo. Thông thường, những thành phần khối sẽ khởi đầu trên một hàng mới. Nhưng ở đây, cả ba thành phần khối hoàn toàn có thể nằm trên cùng một hàng đó là nhờ vào thuộc tính float .
Thuộc tính Float trong CSS
Thuộc tính float có tính năng đẩy thành phần sang bên trái hoặc bên phải. Nó thường được vận dụng vào việc phong cách thiết kế bố cục tổng quan của website ( Layout ). Ở Layout phía trên, phần nằm giữa gồm ba khối : menu, nội dung, quảng cáo. Thông thường, những thành phần khối sẽ mở màn trên một hàng mới. Nhưng ở đây, cả ba thành phần khối hoàn toàn có thể nằm trên cùng một hàng đó là nhờ vào thuộc tính float .
Bước 1: Phân tích các khối chính (cấp 1)
Layout gồm 3 khối chính là : Header, Content, Footer ( Xem ví dụ )
Lưu ý : Khối chính nhất là khối Container dùng để bảo phủ 3 khối đó .
Header
Content
Footer
Bước 2: Phân tích các khối chính (cấp 2)
Bên trong khối Content được chia thành 2 phần : Menu, Baiviet ( Xem ví dụ )
Header
MenuBaivietFooter
Bước 3: Phân tích các khối chính (cấp 3)
Bên trong khối Menu có một cái menu, ta gọi nó là menu_child
Bên trong khối Baiviet có những khối bài viết con, ta gọi nó là baiviet_child
( Xem ví dụ )
Header
menu_childbaiviet_child
baiviet_child
Footer
Bước 4: Thêm các phần tử nội dung và định dạng cho khối container, header, footer
Sau khi đã nghiên cứu và phân tích xong những khối chính của Layout, ta thêm những thành phần nội dung như : list menu, những bài viết, bản quyền, … và định dạng cho những khối đơn thuần như container, header, footer ( Xem ví dụ )
Bước 5: Định dạng cho khối Content
Ta thiết lập khối Menu chiều rộng 35%, khối Baiviet 65% và đẩy chúng sang trái để có thể nằm trên cùng một hàng
Ta thiết lập thuộc tính overflow : auto cho khối Content để nó hoàn toàn có thể chứa 2 khối Menu, Baiviet
( Xem ví dụ )
Bước cuối: Định dạng cho khối menu_child, baiviet_child và các chi tiết lặt vặt
( Xem ví dụ )
