Thuộc tính float trong CSS

Sử dụng thuộc tính float thiết lập thành phần HTML trôi về trái, về phải, ứng dụng để dàn trang tạo layout bố cục tổng quan website, tìm hiểu và khám phá cách vô hiệu hiệu ứng phụ ảnh hưởng tác động đến chiều cao thành phần chứa bên trong có float với lớp clearfix

Tóm Tắt

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ử.

Bạn đang đọc: Thuộc tính float trong CSS

float:

right
left
none

Chọn để kiểm tra

Đ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 thành phần là float ( right hoặc left ), thì chiều cao thành phần chứa nó thu gọn sao cho vừa những nội dung còn lại ( không float ), chiều cao thành phần float không tác động ảnh hưởng gì trong thống kê giám sát chiều cao thành phần chứa. Như trường hợp phần tử chứa chỉ chứa bên trong nó những phần tủ float thì độ cao của nó là không .


    
        float: left;
    
    
        float: right;
    
    Đây là nội dung trong phần tử cha

float : left ;
float : right ;
Đây là nội dung trong phần tử cha
Đây là nội dung trong thành phần cha

Kỹ thuật với clear để loại bỏ ảnh hưởng float đến chiều cao

Tính chất này nhiều lúc gây ra những hiệu ứng phụ không mong ước, thành phần float cao vượt quá size thành phần cha, dẫn đến chiếm chỗ một cách không mong ước cho những thành phần tiếp theo sau thành phần cha .
Một ví dụ như sau :


    
        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ứ hai

float : left ;
Đây là nội dung trong phần tử chứa thứ nhất
Đây là nội dung trong thành phần chứa thứ nhấtfloat : left ;
Đây là nội dung trong phần tử chứa thứ hai
Đây là nội dung trong thành phần chứa thứ hai
Ví dụ cho thấy thành phần float không ảnh hưởng tác động đến chiều cao thành phần chứa thứ nhất, chiều cao thành phần chứa thứ nhất không phủ bọc hết thành phần float, thành phần float tràn xuống dưới dẫn tới chiếm chỗ thành phần chứa thứ hai, nó làm tác động ảnh hưởng luôn tới luồng trình diễn thành phần 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

có css clear: both; vào
cuối của phần tử chứa, phần tử đó dạng

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 :




    
        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ứ hai

float: left;

Xem thêm: Tính đóng gói (Encapsulation) trong OOP | CppDeveloper

Đây là nội dung trong phần tử chứa thứ nhất.

Đây là nội dung trong thành phần chứa thứ nhất .float : left ;
Đây là nội dung trong phần tử chứa thứ hai
Đây là nội dung trong thành phần chứa thứ hai
Phần tử chứa thứ nhất đã có chiều cao bảo phủ hết thành phần 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 hoàn toàn có thể viết :




    
        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ứ hai

Kết quả :
float : left ;
Đây là nội dung trong phần tử chứa thứ nhất.
Đây là nội dung trong thành phần chứa thứ nhất .float : left ;
Đây là nội dung trong phần tử chứa thứ hai
Đây là nội dung trong thành phần chứa thứ hai

Bố 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.




    
        Khối HTML1
        Nội dung ...
        Nội dung ...
    
    
        Khối HTML2
        Nội dung ...

Kết quả :
Khối HTML1
Nội dung …
Nội dung …
Khối HTML2

Nội dung …

Xem thêm: stronger tiếng Anh là gì?

ĐĂNG KÝ KÊNH, XEM CÁC VIDEO TRÊN XUANTHULAB

Đăng ký nhận bài viết mới

Source: https://final-blade.com
Category : Kiến thức Internet

admin

final-blade.com