Thuộc tính float CSS là một thuộc tính định vị. Nó được sử dụng để đẩy một phần tử sang trái hoặc phải, cho phép phần tử khác quấn quanh nó. Nó thường được sử dụng với hình ảnh và bố cục.
Để hiểu mục đích và nguồn gốc của nó, chúng ta hãy xem màn hình in của nó. Trong màn hình in, hình ảnh được đặt vào trang sao cho văn bản bao quanh nó nếu cần.
Làm thế nào nó hoạt động
Các yếu tố được thả nổi chỉ theo chiều ngang. Vì vậy, chỉ có thể nổi các phần tử sang trái hoặc phải, không lên hoặc xuống.
Một phần tử nổi có thể được di chuyển càng xa về bên trái hoặc bên phải càng tốt. Đơn giản, điều đó có nghĩa là một phần tử nổi có thể hiển thị ở cực bên trái hoặc cực bên phải.
Các phần tử sau phần tử nổi sẽ chảy xung quanh nó.
Các yếu tố trước yếu tố nổi sẽ không bị ảnh hưởng.
Nếu hình ảnh nổi bên phải, các văn bản chảy xung quanh nó, bên trái và nếu hình ảnh nổi bên trái, văn bản chảy xung quanh nó, bên phải.
Ví dụ thuộc tính CSS
Hãy xem một ví dụ đơn giản để hiểu thuộc tính float CSS.
Để hiểu mục đích và nguồn gốc của nó, chúng ta hãy xem màn hình in của nó. Trong màn hình in, hình ảnh được đặt vào trang sao cho văn bản bao quanh nó nếu cần.
Làm thế nào nó hoạt động
Các yếu tố được thả nổi chỉ theo chiều ngang. Vì vậy, chỉ có thể nổi các phần tử sang trái hoặc phải, không lên hoặc xuống.
Một phần tử nổi có thể được di chuyển càng xa về bên trái hoặc bên phải càng tốt. Đơn giản, điều đó có nghĩa là một phần tử nổi có thể hiển thị ở cực bên trái hoặc cực bên phải.
Các phần tử sau phần tử nổi sẽ chảy xung quanh nó.
Các yếu tố trước yếu tố nổi sẽ không bị ảnh hưởng.
Nếu hình ảnh nổi bên phải, các văn bản chảy xung quanh nó, bên trái và nếu hình ảnh nổi bên trái, văn bản chảy xung quanh nó, bên phải.
Ví dụ thuộc tính CSS
Hãy xem một ví dụ đơn giản để hiểu thuộc tính float CSS.
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: right;
}
</style>
</head>
<body>
<p>The following paragraph contains an image with style
<b>float:right</b>. The result is that the image will float to the right in the paragraph.</p>
<img src="good-morning.jpg" alt="Good Morning Friends"/>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</body>
</html>