Tidadigi Logo

CSS Float

Thuộc tính CSS float được dùng để di chuyển một phần tử khỏi luồng tài liệu thông thường. Nó định vị phần tử đó ở bên trái hoặc bên phải vùng chứa. Ví dụ: float: left di chuyển phần tử sang trái và float: right di chuyển nó sang phải.

Nội dung khác sẽ bao quanh phần tử được float giúp tạo ra một layout động hơn. Mặc dù không có float: center trực tiếp trong CSS bạn có thể dùng các phương pháp khác. Ví dụ như dùng margins để căn giữa các phần tử.

Cú pháp

float: none | left | right | initial | inherit;

Giá trị thuộc tính

Giá trịMô tả
noneĐây là giá trị mặc định phần tử sẽ không được float.
leftPhần tử được float ở bên trái vùng chứa cho phép nội dung bao quanh bên phải.
rightPhần tử được float ở bên phải vùng chứa cho phép nội dung bao quanh bên trái.
initialPhần tử được đặt về giá trị mặc định của nó.
inheritPhần tử kế thừa thuộc tính float từ phần tử cha của nó.

Chúng ta sẽ dùng các giá trị thuộc tính trên để hiểu cách dùng qua ví dụ.

Ví dụ về CSS Float

Ví dụ 1: Sử dụng CSS float: left

Thuộc tínhfloat: left; CSS property định vị một phần tử ở bên trái vùng chứa của nó. Nó cho phép nội dung bao quanh bên phải.

HTML 
<!DOCTYPE html>
<html>

<head>
    <title>CSS Float</title>
</head>

<body>
    <div class="GFG" 
         style="font-size:40px; 
                color:#006400;
                float:left;">
        GeeksforGeeks
    </div>
</body>

</html>

Đầu ra:

css-float

Ví dụ 2: Sử dụng CSS float: right

Thuộc tính CSS float: right; định vị một phần tử ở bên phải vùng chứa. Nó cho phép nội dung bao quanh bên trái.

HTML 
<!DOCTYPE html>
<html>

<head>
    <title>CSS Float</title>
</head>

<body>
    <div class="GFG" 
         style="font-size:40px; 
                color:#006400; 
                float:right;">
        GeeksforGeeks
    </div>
</body>

</html>

Đầu ra:

css-float

Ví dụ 3: Sử dụng CSS float: none

Thuộc tính CSS float: none; đặt lại hành vi float của một phần tử. Nó khiến phần tử không float và giữ nguyên trong luồng tài liệu thông thường.

HTML 
<!DOCTYPE html>
<html>

<head>
    <title>CSS Float</title>
</head>

<body>
    <div class="GFG" 
         style="font-size:40px; 
                color:#006400; 
                float:none;">
        GeeksforGeeks
    </div>
</body>

</html>

Đầu ra:

css-float

Ví dụ 4: Sử dụng CSS float: inherit

Thuộc tính CSS float: inherit; làm cho một phần tử kế thừa giá trị float từ phần tử cha. Điều này đảm bảo tính nhất quán với hành vi float của cha.

HTML 
<!DOCTYPE html>
<html>

<head>
    <title> CSS Float</title>
</head>

<body>
    <div style="float:right">
        <div class="GFG" 
             style="font-size:40px; 
                    color:#006400; 
                    float:inherit;">
            GeeksforGeeks
        </div>
    </div>
</body>

</html>

Đầu ra:

css-float

Các trình duyệt được hỗ trợ

Thuộc tính CSS float được hỗ trợ rộng rãi trên các trình duyệt chính:

Lưu ý: Các phiên bản này cho biết thời điểm hỗ trợ thuộc tính float được giới thiệu. Vì đây là một tính năng CSS cũ nó được hỗ trợ đầy đủ trong tất cả các trình duyệt hiện đại.


Last Updated : 21/07/2025