Thuộc tính clear
Các phần tử theo sau một phần tử có thuộc tính float
(left, right) nó sẽ bám theo đuôi phần tử đó. Nếu bạn muốn ngắt đuôi bạn dùng thuộc tính clear
.
Thuộc tính clear
nhận giá trị:
none
giá trị mặc định, cho phép các phần tử bám theo cả trái, phảileft
không cho bám bên tráiright
không cho bám bên phảiboth
không cho bám cả hai bên
Ví dụ:
<style> .floating { float: right; } </style> This paragraph is above the div element and is not affected by the float right property. <br /><br /> <div class="floating"> <img src="https://xuanthulab.net/public/img/logo.png" style="width: 200px;" /> </div> This paragraph comes after the div element and is affected by the float right property. <br /><br /> This paragraph also comes after the div element and is affected by the float right property. <br /> <br />
This paragraph is above the div element and is not affected by the float right property.
This paragraph comes after the div element and is affected by the float right property.
This paragraph also comes after the div element and is affected by the float right property.
Ví dụ sử dụng thuộc tính clear: both;
This paragraph is above the div element and is not affected by the float right property.
This paragraph comes after the div element and is affected by the float right property.
This paragraph is out of the floating group and is not affected by the float right property.
<style> .floating { float: right; } .clearing { clear: both; } </style> This paragraph is above the div element and is not affected by the float right property. <br/><br/> <div class="floating"> <img src="https://xuanthulab.net/public/img/logo.png" style="width: 200px; height: 150px" /> </div> This paragraph comes after the div element and is affected by the float right property. <br/><br class="clearing"/> This paragraph is out of the floating group and is not affected by the float right property. <br/> <br/>