Căn chỉnh phần tử với float trong CSS

Thuộc tính float

float đẩy phần tử sang trái hoặc phải, cho phép văn bản và phần tử nội tuyến khác bao quanh. Giá trị: left, right, none (mặc định).

Ví dụ: Căn phải hộp nội dung

<!DOCTYPE html>
<html>
<head>
  <style>
    .demo {
      float: right;
      width: 200px;
      border: 1px dashed blue;
      padding: 5px;
    }
  </style>
</head>
<body>
  <h1>Tiêu đề</h1>
  <div class="demo">
    <p>Nội dung này căn phải (float: right).</p>
  </div>
  <p>Văn bản bình thường sẽ bao quanh hộp float.</p>
</body>
</html>

Lưu quan trọng: Phần tử cha của float cần clearfix (ví dụ: overflow: auto hoặc ::after { clear: both }) để không bị thu hẹp chiều cao.