Sử dụng các thuộc tính float CSS, bạn có thể nổi bất kỳ hình ảnh nào ở bên phải của bất kỳ văn bản nào, như có thể nhìn thấy với hình ảnh bên phải của văn bản này. Để làm điều này trên trang web của bạn làm theo các bước dưới đây.

Trong ví dụ này, chúng tôi sẽ sử dụng tệp CSS bên ngoài. Bằng cách sử dụng tệp CSS bên ngoài, bạn có thể tạo một hình ảnh nổi trên bất kỳ trang nào có liên kết đến tệp CSS. Các tệp CSS bên ngoài cũng giúp dễ dàng thay đổi bất kỳ cài đặt nào bạn có thể muốn điều chỉnh trong tương lai.

1. Tạo một tệp CSS. Nếu bạn đã có tệp CSS cho trang web của mình, hãy chỉnh sửa tệp CSS của bạn và thêm mã sau đây.

2. Thêm mã sau vào tệp CSS.

 .floatRight {float: right; lề-trái: 20px} 

Mẹo: Thêm float: left sẽ làm cho hình ảnh nổi ở bên trái của văn bản.

Nếu bạn muốn có nhiều hơn một hình ảnh nổi bên phải, hãy thêm dòng sau vào tệp CSS.

 .floatRightClear {float: right; clear: right; lề-left: 20px} 

3. Sau khi mã trên được tạo, hãy lưu tệp CSS và gọi nó từ mỗi trang HTML bằng mã tương tự như ví dụ bên dưới. Trong ví dụ của chúng tôi, chúng tôi đã đặt tên tệp CSS style.css.

4. Cuối cùng, thêm hình ảnh vào bất kỳ hình ảnh nào bạn muốn nổi ở bên phải của container.