Ví dụ về thuộc tính float

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

<html>
<head>
<style type="text/css">
div {
    border: 1px solid #ff0000;
}
</style>
</head>

<body>
<div>
<p>float01</p>
<p>float02</p>
</div>
</body>
</html>

Trình duyệt hiển thị khi chưa sử dụng thuộc tính float:

float01

float02

float: left;

Thêm thuộc tính float: left; vào thành phần:

<html>
<head>
<style type="text/css">
div {
    border: 1px solid #ff0000;
}
p {
    float: left;
}
</style>
</head>

<body>
<div>
<p>float01</p>
<p>float02</p>
</div>
</body>
</html>

float01

float02

float: right;

Thêm thuộc tính float: right; vào thành phần thứ hai:

<html>
<head>
<style type="text/css">
div {
    border: 1px solid #ff0000;
}
p {
    float: left;
}

p.fRight {
    float: right;
}
</style>
</head>

<body>
<div>
<p>float01</p>
<p class="fRight">float02</p>
</div>
</body>
</html>

float01

float02

float: none;

<html>
<head>
<style type="text/css">
div {
    border: 1px solid #ff0000;
}
p {
    float: left;
}

p.floatNone {
    float: none;
}
</style>
</head>

<body>
<div>
<p>float01</p>
<p>float02</p>
<p class="floatNone">float03</p>
<p>float04</p>
</div>
</body>
</html>

float01

float02

float03

float04

Thành phần float03 sử dụng float: none; do đó thành phần float04 sẽ không được float lên ngang hàng với các thành phần khác.

float: left; với image

<html>
<head>
<style type="text/css">
img {
    float: left;
    padding-right: 10px;
}
</style>
</head>

<body>
<p><img src="bg_webstd.gif" alt="" /> chữ bao quanh hình chữ bao quanh hình chữ bao 
quanh hình chữ bao quanh hình chữ bao quanh hình chữ bao quanh hình chữ bao quanh 
hình chữ bao quanh hình chữ bao quanh hình chữ bao quanh hình chữ bao quanh hình 
chữ bao quanh hình chữ bao quanh hình chữ bao quanh hình chữ bao quanh hình chữ bao 
quanh hình chữ bao quanh hình chữ bao quanh hình chữ bao quanh hình chữ bao quanh 
hình chữ bao quanh hình chữ bao quanh hình chữ bao quanh hình  chữ bao quanh hình 
chữ bao quanh hình chữ bao quanh hình chữ bao quanh hình  chữ bao quanh hình chữ 
bao quanh hình </p>
</body>
</html>

chữ bao quanh hình chữ bao quanh hình chữ bao quanh hình chữ bao quanh hình chữ bao quanh hình chữ bao quanh hình chữ bao quanh hình chữ bao quanh hình chữ bao quanh hình chữ bao quanh hình chữ bao quanh hình chữ bao quanh hình chữ bao quanh hình chữ bao quanh hình chữ bao quanh hình chữ bao quanh hình chữ bao quanh hình chữ bao quanh hình chữ bao quanh hình chữ bao quanh hình chữ bao quanh hình chữ bao quanh hình chữ bao quanh hình chữ bao quanh hình chữ bao quanh hình chữ bao quanh hình chữ bao quanh hình chữ bao quanh hình chữ bao quanh hình

float: right; với image

<html>
<head>
<style type="text/css">
img {
    float: right;
    padding-left: 10px;
}
</style>
</head>

<body>
<p><img src="bg_webstd.gif" alt="" /> chữ bao quanh hình chữ bao quanh hình chữ bao 
quanh hình chữ bao quanh hình chữ bao quanh hình chữ bao quanh hình chữ bao quanh 
hình chữ bao quanh hình chữ bao quanh hình chữ bao quanh hình chữ bao quanh hình 
chữ bao quanh hình chữ bao quanh hình chữ bao quanh hình chữ bao quanh hình chữ bao 
quanh hình chữ bao quanh hình chữ bao quanh hình chữ bao quanh hình chữ bao quanh 
hình chữ bao quanh hình chữ bao quanh hình chữ bao quanh hình  chữ bao quanh hình 
chữ bao quanh hình chữ bao quanh hình chữ bao quanh hình  chữ bao quanh hình chữ 
bao quanh hình </p>
</body>
</html>

chữ bao quanh hình chữ bao quanh hình chữ bao quanh hình chữ bao quanh hình chữ bao quanh hình chữ bao quanh hình chữ bao quanh hình chữ bao quanh hình chữ bao quanh hình chữ bao quanh hình chữ bao quanh hình chữ bao quanh hình chữ bao quanh hình chữ bao quanh hình chữ bao quanh hình chữ bao quanh hình chữ bao quanh hình chữ bao quanh hình chữ bao quanh hình chữ bao quanh hình chữ bao quanh hình chữ bao quanh hình chữ bao quanh hình chữ bao quanh hình chữ bao quanh hình chữ bao quanh hình chữ bao quanh hình chữ bao quanh hình chữ bao quanh hình