Thuộc tính clear trong CSS

Thuộc tính clear trong CSS ngăn cản phần tử hiển thị bên cạnh các phần tử được thiết lập thuộc tính float.

Thuộc tính clear có thể nhận giá trị:

none: Khi phần tử được xác định với giá trị none thì phần tử với thuộc tính float có thể xuất hiện trên bất kỳ cạnh nào của phần tử này.
left: phần tử với thuộc tính float không thể xuất hiện bên trái phần tử này.
right: phần tử với thuộc tính float không thể xuất hiện bên phải phần tử này.
both: phần tử với thuộc tính float không thể xuất hiện bên trái hoặc bên phải phần tử này.

Thuộc tính clear có thể áp dụng cho:

Tất cả các phần tử Block Level trong tài liệu.

Cú pháp thuộc tính clear trong DOM

object.style.clear = "top";

Ví dụ thuộc tính clear trong CSS

Ví dụ dưới đây chỉ cách sử dụng của thuộc tính clear trong CSS.

<html>
   <head>
   
      <style type="text/css">
         div.float {
            border:1px solid #ff9900;
            width:120px;
            float: right;
         }
         div.clear {
            border:1px solid #cccccc;
            width:120px;
            clear: right;
         }
      </style>
      
   </head>
   <body>
   
      <div class="float">
      Vi du thuoc tinh float trong CSS.
      </div>
      
      <div class="clear">
         <p>
         Vi du thuoc tinh clear trong CSS.
         </p>
         
         <p>
         Hoc CSS co ban va nang cao tai VietJack theo cac buoc don gian co kem theo vi du minh hoa cu the.
         </p>
      </div>
      
   </body>
</html>

Quảng cáo

Kết quả là:

Đã có app VietJack trên điện thoại, giải bài tập SGK, SBT Soạn văn, Văn mẫu, Thi online, Bài giảng....miễn phí. Tải ngay ứng dụng trên Android và iOS.

Theo dõi chúng tôi miễn phí trên mạng xã hội facebook và youtube:

Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.

Bài học CSS phổ biến khác tại vietjack.com: