Giới thiệu về thuộc tính float trong CSS

Giả sử chúng ta có một thẻ div chứa một văn bản dài nào đó. Hãy chèn một hình ảnh vào đầu văn bản này:

<div>
	<img src="img.png" alt="">
	some long text
</div>

div {
	width: 400px;
	text-align: justify;
}

Như bạn thấy, đáy của hình ảnh nằm trên dòng đầu tiên của văn bản, còn phần còn lại đi lên trên. Ở bên phải hình ảnh có một khoảng trống lớn. Hãy làm sao để văn bản lấp đầy khoảng trống này. Để làm điều này, chúng ta đặt thuộc tính float với giá trị left cho hình ảnh:

<div>
	<img src="img.png" alt="">
	some long text
</div>

div {
	width: 400px;
	text-align: justify;
}
img {
	float: left;
}

Vậy là bây giờ hình ảnh trôi nổi bên trái, còn văn bản chảy xung quanh nó tương ứng ở bên phải. Khi đó khoảng trống bên cạnh hình ảnh đã biến mất.

Có thể buộc hình ảnh trôi nổi không phải bên trái, mà là bên phải. Để làm điều này, hãy đặt float về giá trị right:

<div>
	<img src="img.png" alt="">
	some long text
</div>

div {
	width: 400px;
	text-align: justify;
}
img {
	float: right;
}

Hãy lấy một văn bản dài. Chèn một hình ảnh vào đầu văn bản, và một hình ảnh khác vào giữa. Hãy làm sao để hình ảnh thứ nhất trôi nổi bên trái, còn hình thứ hai - bên phải.