Căn chỉnh Trái/Phải với thuộc tính float trong CSS

Chúng ta có thể căn chỉnh các phần tử trong HTML bằng thuộc tính CSS float, được dùng để định vị hoặc định dạng một hộp (box) hoặc nội dung. Nhà phát triển có thể đặt phần tử về bên trái hoặc bên phải với CSS float.

Ví dụ 1: Bố cục ghế ngồi rạp chiếu phim

<!DOCTYPE html>
<html>
<head>
<title>Alignment using CSS Float</title>
<style>
  .screen {
    padding: 10px; width: 70%; margin: 0 auto;
    background-color: #f06d06; text-align: center; color: white;
    border-radius: 0 0 50px 50px; border: 4px solid #000;
  }
  .backSeats div {
    margin: 10px; padding: 10px; color: white; border: 4px solid #000;
    background-color: #4CAF50;
  }
  .leftFloat { float: left; }
  .rightFloat { float: right; }
</style></head>
<body>
  <div class="screen">Screen</div>
  <div class="backSeats">
    <div class="leftFloat">Premium Left Seat 1</div>
    <div class="leftFloat">Premium Left Seat 2</div>
    <div class="rightFloat">Premium Right Seat 1</div>
  </div>
</body>
</html>

Kết quả

Ví dụ 2: Float với clear

<!DOCTYPE html>
<html>
<head>
<title>Alignment using CSS Float</title>
<style type="text/css">
  p {
    float: left; margin: 10px; padding: 10px;
    color: white; background-color: #48C9B0; border: 4px solid #145A32;
  }
  p.noneFloat {
    float: none; clear: both; color: #34495E;
  }
</style></head>
<body>
  <p>I love Java.</p>
  <p class="noneFloat">I think C# is better.</p>
  <p>Even C isn't a bad choice.</p>
  <p>I agree!</p>
</body>
</html>

Kết quả

Lưu ý quan trọng:

• float: left - phần tử trôi về bên trái, nội dung khác bao quanh bên phải
• float: right - phần tử trôi về bên phải, nội dung khác bao quanh bên trái
• float: none - mặc định, không float (ghi đè float kế thừa)
• clear: both|left|right - ngăn chặn việc bao quanh của float trước đó

Vấn đề thường gặp: Container chứa toàn float elements sẽ bị collapsed (chiều cao = 0). Xem bài Khắc phục Container Cha bị Collapsed để biết cách giải quyết.