Thuộc Tính Float Trong CSS
Có thể bạn quan tâm
Thuộc tính float
Thuộc tính float được sử dụng để thay đổi vị trí của phần tử trong luồng dàn trang, dàn phần tử thông thường (luồng dàn phần tử trong browser khi không dùng CSS hay CSS nhận các giá trị mặc định). Thuộc tính này sẽ đẩy phần tử trôi về trái hoặc phải của phẩn tử chứa.
Cú pháp:
float: left | right | none | inherit;- left: phần tử được trôi về phía bên trái. Luồng nội dung thông thường sẽ giữ ở bên phải, bắt đầu ở phần đỉnh của phần tử. Luồng nội dung xung quanh box thay đổi tùy thuộc vào giá trị của thuộc tính clear .
- left: phần tử được trôi về phía bên phải
- none: phần tử không bị đẩy về phía nào, vị trí của nó theo luồng dựng thông thường.
- inherit: giá trị float kế thừa từ phần tử cha.
Đoạn văn này có một hình ảnh, có thể thiết lập nó trôi về bên phải với float: right;, bên trái với float: left; hay được sắp xếp theo luồng mặc định với float: none;. Thuộc tính float thiết lập trôi phần tử theo phương ngang về trái hoặc phải chứ không thể thiết lập trôi theo phương đứng lên trên, xuống dưới. Nếu có một vài phần tử cùng trôi theo nhau, nó sẽ nối đuôi nhau (về trái hoặc về phải) nếu đủ chỗ để hiện thị phần tử.
Ảnh hưởng float đến chiều cao phần tử chứa
Khi một phần tử là float (right hoặc left), thì chiều cao phần tử chứa nó thu gọn sao cho vừa các nội dung còn lại (không float), chiều cao phần tử float không tác động gì trong tính toán chiều cao phần tử chứa. Như trường hợp phần tử chứa chỉ chứa bên trong nó các phần tủ float thì chiều cao của nó là không.
<div style="border: 1px dotted black;"> <div style="margin: 5px; width: 100px; height: 100px; background: hotpink; float: left;"> float: left; </div> <div style="margin: 5px; width: 100px; height: 50px; background: hotpink; float: right;"> float: right; </div> Đây là nội dung trong phần tử cha </div> float: left; float: right; Đây là nội dung trong phần tử chaKỹ thuật với clear để loại bỏ ảnh hưởng float đến chiều cao
Tính chất này đôi khi gây ra những hiệu ứng phụ không mong muốn, phần tử float cao vượt quá kích thước phần tử cha, dẫn đến chiếm chỗ một cách không mong muốn cho các phần tử tiếp theo sau phần tử cha.
Một ví dụ như sau:
<div style="border: 1px dotted black;"> <div style="margin: 5px; width: 100px; height: 100px; background: hotpink; float: left;"> float: left; </div> Đây là nội dung trong phần tử chứa thứ nhất </div> <div style="border: 1px dotted red;"> <div style="margin: 5px; width: 100px; height: 100px; background: hotpink; float: left;"> float: left; </div> Đây là nội dung trong phần tử chứa thứ hai </div> float: left; Đây là nội dung trong phần tử chứa thứ nhất float: left; Đây là nội dung trong phần tử chứa thứ haiVí dụ cho thấy phần tử float không tác động đến chiều cao phần tử chứa thứ nhất, chiều cao phần tử chứa thứ nhất không bao bọc hết phần tử float, phần tử float tràn xuống dưới dẫn tới chiếm chỗ phần tử chứa thứ hai, nó làm ảnh hưởng luôn tới luồng trình bày phần tử chứa thứ hai này.
Để khắc phục tình trạng này có thể dùng kỹ thuật xóa bỏ float trong phần tử chứa với thuộc tính clear. Xóa bỏ ảnh hưởng float sau phần tử float và trước khi kết thúc phần tử chứa.
Cách hay dùng đó là thêm một phần tử block <div> có css clear: both; vào cuối của phần tử chứa, phần tử đó dạng
<div style="clear:both;"></div>Mọi người cũng hay tạo ra một class css có tên clearfix để áp dụng cho thuận tiện:
.clearfix { clear: both; }Ví dụ trên viết lại:
<style> .clearfix { clear: both; } </style> <div style="border: 1px dotted black;"> <div style="margin: 5px; width: 100px; height: 100px; background: hotpink; float: left;"> float: left; </div> Đây là nội dung trong phần tử chứa thứ nhất. <div class="clearfix"></div> </div> <div style="border: 1px dotted red;"> <div style="margin: 5px; width: 100px; height: 100px; background: hotpink; float: left;"> float: left; </div> Đây là nội dung trong phần tử chứa thứ hai </div> float: left; Đây là nội dung trong phần tử chứa thứ nhất. float: left; Đây là nội dung trong phần tử chứa thứ haiPhần tử chứa thứ nhất đã có chiều cao bao bọc hết phần tử float.
Kỹ thuật với :after để loại bỏ ảnh hưởng float đến chiều cao
Kỹ thuật này là đưa thuộc tính clear vào chính thành phần của phần tử chứa, đó là pseudo :after, lúc đó bạn không phải chèn thêm phần tử vào phần tử chứa, mà bản thân phần tử chứa sẽ tự sinh ra ở cuối thành phần :after có thuộc tính clear. Ví dụ, class có tên clearafter
.clearafter:after { content: "."; visibility: hidden; display: block; height: 0; clear: both; }Ví dụ trên có thể viết:
<style> .clearafter:after { content: "."; visibility: hidden; display: block; height: 0; clear: both; } </style> <div style="border: 1px dotted black;"; class="clearafter"> <div style="margin: 5px; width: 100px; height: 100px; background: hotpink; float: left;"> float: left; </div> Đây là nội dung trong phần tử chứa thứ nhất. </div> <div style="border: 1px dotted red;" class="clearafter"> <div style="margin: 5px; width: 100px; height: 100px; background: hotpink; float: left;"> float: left; </div> Đây là nội dung trong phần tử chứa thứ hai </div>Kết quả:
float: left; Đây là nội dung trong phần tử chứa thứ nhất. float: left; Đây là nội dung trong phần tử chứa thứ haiBố cục với float
Thuộc tính float hữu ích để bố cụ dàn trang HTML. Hãy bắt đầu bằng cách tạo ra một khu vực chia làm hai cột, cột thứ nhất chiếm 40% cột thứ 2 là 60% phần tử chứa.
<style> .layout1-container { background: #ff5722; border: 1px dotted red; padding: 5px; } .layout1-container:after { content: "."; visibility: hidden; display: block; height: 0; clear: both; } .layout1-col1 { box-sizing: border-box; float: left; background: #ffc107; width: 40%; padding: 5px; } .layout1-col2 { box-sizing: border-box; float: left; background: #00bcd4; width: 60%; padding: 5px; } </style> <div class="layout1-container"> <div class="layout1-col1"> <p>Khối HTML1</p> <p>Nội dung ... </p> <p>Nội dung ... </p> </div> <div class="layout1-col2"> Khối HTML2 <p>Nội dung ... </p> </div> </div>Kết quả:
Khối HTML1
Nội dung ...
Nội dung ...
Khối HTML2Nội dung ...
Mục lục bài viết Thuộc tính floatẢnh hưởng float đến chiều caoSử dụng clear với floatSử dụng :after với floatBố cục với float ĐĂNG KÝ KÊNH, XEM CÁC VIDEO TRÊN XUANTHULAB Đăng ký nhận bài viết mớiTừ khóa » Float Css Là Gì
-
Thuộc Tính FLOAT Và CLEAR Trong CSS
-
Cách Sử Dụng Thuộc Tính Float Trong CSS để Thiết Kế Layout
-
Làm Chủ Thuộc Tính Float Trong CSS - Viblo
-
Thuộc Tính Float | CSS | Học Web Chuẩn
-
Thuộc Tính Float CSS Là Gì? Phân Biệt Float Và Clear Trong CSS
-
Bài 22: Thuộc Tính Float Và Clear Trong CSS | Tìm ở đây
-
Thuộc Tính Float ( Left - Right - None) Trong CSS - Freetuts
-
Hướng Dẫn Và Ví Dụ CSS Float Và Clear - Openplanning
-
Thuộc Tính Float Và Clear Trong CSS - Bizfly Cloud
-
Float Là Gì? Cách Sử Dụng Trong CSS - W3seo
-
Thuộc Tính Float Và Clear Trong CSS - Quách Quỳnh
-
Thuộc Tính Float Và Clear Trong CSS
-
Tìm Hiểu Về Thuộc Tính Float Trong CSS Là Gì? - VietAds
-
[Tự Học CSS] Tìm Hiểu Về Thuộc Tính Float Và Clear, Display - Cafedev