- Trang chủ
- Tham khảo
- CSS
- Thuộc tính float
Thuộc tính float xác định có hay không một thành phần được float [trôi nổi].
Với giá trị như sau:
| float | left | float: left; | Thành phần được trôi nổi [float] qua bên trái. |
| right | float: right; | Thành phần được trôi nổi [float] qua bên phải. | |
| none | float: none; | Thành phần không được trôi nổi [float] qua bên phải hay trái, đây là dạng mặc định. | |
| inherit | float: inherit; | Xác định thừa hưởng thuộc tính từ thành phần cha [thành phần bao ngoài]. |
Float left
Float left
Khi sử dụng float, thì thành phần đã rời bỏ vị trí tuyệt đối trước đó, như ta thấy ở trên.
Thuộc tính float được hỗ trợ trong đa số các trình duyệt.
Giá trị "inherit" không hỗ trợ trình duyệt IE7 trở xuống, IE8 đòi hỏi phải có !Doctype
Trong CSS có rất nhiều thuộc tính với những chức năng khác nhau. Bài viết này Bizfly Cloud sẽ giới thiệu tới bạn thuộc tính Float và Clear trong CSS.
Thuộc tính Float
Thuộc tính Float được sử dụng để chuyển vị trí và định dạng nội dung một phần tử, ví dụ, chuyển một hình ảnh sang góc trái hoặc phải so với chữ trong không gian bao quanh nó. Thuộc tính này rất cần thiết trong việc định dạng bố cục trang và chia bố cục HTML của một trang web.
Như bạn đã biết, hiện nay việc sử dụng thẻ div hay các thẻ HTML5 bao gồm header, footer và article để bố cục trang là khá phổ biến. Tuy nhiên, theo mặc định, các phần tử HTML của trang web là không float.
Để giải quyết được vấn đề trên, bạn có thể sử dụng thuộc tính Float vì Float có thể thực hiện một trong các giá trị như sau:
left - Phần tử chuyển sang bên trái của container
right - Phần tử chuyển sang bên phải của container
none - Phần tử giữ nguyên vị trí của nó [trạng thái bình thường]. Mặc định.
inherit - Phần tử con kế thừa thuộc tính float của phần tử cha.
Theo cách dùng đơn giản nhất, thuộc tính Float có thể được dùng để phân bổ chữ bao quanh các hình ảnh.
Cú pháp chung của Float
tagName {
float: giá trị;
}
Lưu ý: Nếu một phần tử được float sang trái hoặc phải [float: left hoặc float: right] thì tất cả các thẻ cùng cấp khác theo sau nó sẽ được đẩy lên trên và lấp đầy chỗ trống của hàng chứa các thẻ đó.
Ví dụ minh họa cho thuộc tính Float
Để hiểu rõ hơn về các lệnh trong thuộc tính Float, hãy cùng xem qua các ví dụ dưới đây.
Float:right - ví dụ đưa hình ảnh nổi lên ở bên phải của văn bản
img { float: right}
p{ background:#FFFACD}
Nội dung của văn bản
Float: left - ví dụ hiển thị hình ảnh ở bên trái văn bản.
img { float: left}
p{ background:#FFFACD}
Nội dung của văn bản
Float: none - ví dụ hiển thị hình ảnh ở vị trí mặc định
img { float: none}
p{ background:#FFFACD}
Nội dung của văn bản
Thuộc tính Clear
Thuộc tính Clear gần như là ngược lại với float và giải quyết các vấn đề của Float [đã được nêu trong phần lưu ý của Float]. Thuộc tính Clear ngăn chặn thành phần A chiếm vùng không gian của thành phần B [thành phần sử dụng float].
Thuộc tính Clear được sử dụng thông dụng nhất là sau khi bạn sử dụng thuộc tính Float cho một phần tử. Trong trường hợp một phần tử được float: left, thì bạn nên sử dụng clear: left. Phần tử được float sẽ tiếp tục nổi, còn những phần tử bị xóa sẽ hiển thị bên dưới phần tử đó trên trang web.
Ví dụ của clear: left:
div {
clear: left;
}
Clearfix
Không có clearfix
Có clearfix
Phần tử được float cao hơn so với phần tử chứa nên sử dụng thuộc tính clearfix với giá trị overflow: auto để khắc phục.
.clearfix {
overflow: auto;
}
Tổng kết Từ những chia sẻ trên đây, bạn sẽ rõ hơn về thuộc tính Float và Clear trong CSS để có thể thiết kế trang web thêm sinh động và đạt hiệu quả công việc. Sau bài viết này, hy vọng rằng ta có thể rút ra được rằng ta nên chia rõ bố cục các phần tử trong trang web trước khi lên trang web. Cùng đón đọc những bài viết tới nhé. Theo Bizfly Cloud chia sẻ >> Có thể bạn quan tâm: So sánh 2 CSS Preprocessor: Sass vs Stylus BizFly Cloud là hệ sinh thái điện toán đám mây được vận hành bởi VCCorp - Công ty dẫn đầu trong lĩnh vực công nghệ và truyền thông tại Việt Nam. Với đội ngũ kỹ thuật viên trình độ cao và kinh nghiệm lâu năm làm việc trên các công nghệ khác nhau như cloud, mobile, web..., chúng tôi có đủ khả năng để hỗ trợ đưa ra những giải pháp và công nghệ toàn diện giúp doanh nghiệp chuyển đổi số thành công. Dành cho độc giả quan tâm tới các dịch vụ đám mây do BizFly Cloud cung cấp có thể truy cập tại đây. |
Trịnh Quý Công @congtrinhh
Đã đăng vào thg 5 1, 2020 3:23 SA 4 phút đọc
Bài đăng này đã không được cập nhật trong 2 năm
Việc học HTML, CSS là những nền tảng căn bản trên con đường trở thành một Web developer chuyên nghiệp. Trong đó, việc nắm được các thuộc tính CSS cơ bản là rất quan trọng. Hôm nay, chúng ta cùng tìm hiểu về một thuộc tính rất hay dùng nhưng cũng khá trừu tượng trong CSS, đó là thuộc tính Float.
Tìm hiểu
- Thuộc tính Float được dùng để làm gì? Hãy cùng xem hình ảnh sau
Đây chính là ứng dụng của Float property trong thiết kế menu trang web. - Còn đây là một ví dụ khác về chia phần hiển thị nội dung trên trang web. Khi chưa dùng Float
- Khi đã dùng Float
Như vậy, ta phần nào hiểu được tác dụng của thuộc tính này trong quá trình xây dựng Front-end. Vậy thuộc tính Float hoạt động như thế nào? Trả lời được câu hỏi này bạn sẽ kiểm soát được bố cục trang web một cách cực kì dễ dàng. Ta biết rằng từ "float" có nghĩa là "nổi". Một trang HTML thông thường được trình bày theo dạng flow, tức là giống như một văn bản vậy, từng đoạn 1 xếp chồng lên nhau, cái nào viết trước nằm ở trên. Tuy nhiên, khi thiết kế bố cục website, có những phần tử không chỉ phân bố theo chiều dọc, mà còn theo chiều ngang, như ví dụ trên. Thuộc tính Float ra đời vì mục đích đó.Thuộc tính Float có 5 giá trị: none, left, right, initial và inherit. Trong đó, giá trị left và right được sử dụng nhiều nhất.
Khi một phần tử nào đó được áp dụng thuộc tính Float, nó nổi lên trên so với trang HTML [coi như nó tàng hình vậy]. Lúc này, trang HTML sẽ coi như phần tử này không hề tồn tại, và chuyển các phần tử ở phía dưới lên thế chỗ nó. - Cùng xem ví dụ dưới đây
Bố cục theo định dạng flow thông thường. Box 1 có thuộc tính Opacity [có thể nhìn xuyên thấu]
Sau khi Box 1 được áp dùng thuộc tính float: left; Lúc này trang HTML sẽ coi Box 1 không hề tồn tại, và các nội dung phía dưới sẽ di chuyển lên. Box 2 bây giời đã chiếm vị trí của Box1[Box 2 màu hồng thẫm do Box 1 bên trên có thuộc tính opacity].Note: Nội dung bên trong của phần tử mà chiếm vị trí phần tử được float sẽ không đi theo nó. Như hình trên, Box 2 chứa một đoạn text, nhưng sau đó nó không hề đi cùng Box 2 mà ở phía ngay dưới.
- Bây giờ, khi ta cùng áp dụng float: left; cho cả 3 box thì sao, hãy xem
Lúc này, cả 3 box đã nổi lên trên so với trang HTML. Đây chính là cách thiết kế menu ngang từ một danh sách không có thứ tự [thẻ ul].Note: float: left; nghĩa là "nổi" sang bên trái, float: right; là "nổi" sang bên phải.
Kết
Thuộc tính Float được sử dụng rất nhiều trong thiết kế website, vì vậy việc làm chủ được nó sẽ trở nên rất hữu ích cho bạn đấy!
Bài sau ta sẽ tìm hiểu về thuộc tính Clear, đây là anh bạn thân của thuộc tính Float, giúp cho việc kiểm soát bố cục trang web dễ dàng hơn nữa, cùng đón xem nhé!
All rights reserved