Các phần tử nổi

7.1 Thuộc tính float

Các phần tử nổi sử dụng thuộc tính float và clear là một trong những phương pháp đầu tiên để tạo ra các bố cục phức tạp trong thiết kế web. Mặc dù các phương pháp hiện đại như Flexbox và Grid thường được ưu tiên hơn, nhưng việc biết sử dụng float và clear vẫn quan trọng để làm việc với các dự án cũ hoặc hiểu được những điều cơ bản của CSS.

Thuộc tính float

Thuộc tính float cho phép phần tử "nổi" sang trái hoặc phải, được bao quanh bởi văn bản và các phần tử khác. Thuộc tính này đặc biệt hữu ích để tạo các bố cục với cột và bao quanh hình ảnh với văn bản.

Cú pháp:

    
      .element {
        float: left; /* hoặc right */
      }
    
  

Giá trị của thuộc tính float:

• left: phần tử nổi sang trái, và các phần tử khác bao quanh nó từ bên phải
• right: phần tử nổi sang phải, và các phần tử khác bao quanh nó từ bên trái
• none: giá trị mặc định, phần tử không nổi
• inherit: thừa kế giá trị từ phần tử cha

Ví dụ sử dụng float:

    
      .float-left {
        float: left;
        width: 200px;
        height: 200px;
        background-color: lightblue;
      }

      .float-right {
        float: right;
        width: 200px;
        height: 200px;
        background-color: lightgreen;
      }

      .content {
        background-color: lightgrey;
        padding: 10px;
      }
    
  

    
      <div class="float-left">Left Float</div>
      <div class="float-right">Right Float</div>
      <div class="content">
        <p>This is some content that will wrap around the floated elements. The left floated element will be placed to the left, and the right floated element will be placed to the right.</p>
      </div>
    
  

7.2 Thuộc tính clear

Thuộc tính clear được sử dụng để quản lý hành vi bao quanh của các phần tử nổi. Nó cho phép ngăn chặn phần tử bị bao quanh bởi các phần tử nổi từ một phía nhất định.

Cú pháp:

    
      .element {
        clear: left; /* hoặc right */
      }
    
  

Giá trị của thuộc tính clear:

• left: phần tử sẽ không bị bao quanh từ bên trái
• right: phần tử sẽ không bị bao quanh từ bên phải
• both: phần tử sẽ không bị bao quanh từ cả hai bên
• none: giá trị mặc định, phần tử bị bao quanh từ cả hai bên

Ví dụ sử dụng clear:

    
      .float-left {
        float: left;
        width: 200px;
        height: 200px;
        background-color: lightblue;
      }

      .float-right {
        float: right;
        width: 200px;
        height: 200px;
        background-color: lightgreen;
      }

      .clear {
        clear: both;
        background-color: lightcoral;
        padding: 10px;
      }

      .content {
        background-color: lightgrey;
        padding: 10px;
      }
    
  

    
      <div class="float-left">Left Float</div>
      <div class="float-right">Right Float</div>
      <div class="clear">Cleared Element</div>
      <div class="content">
        <p>This content will not wrap around the floated elements because of the cleared element above.</p>
      </div>
    
  

Ví dụ về kỹ thuật "clearfix":

    
      .container::after {
        content: "";
        display: table;
        clear: both;
      }
    
  

    
      <div class="container">
        <div class="sidebar">Sidebar Content</div>
        <div class="main">Main Content</div>
      </div>
    
  

7.3 Ưu và nhược điểm của việc sử dụng float

Ưu điểm

1. Dễ sử dụng:
   • Dễ dàng tạo ra các bố cục đơn giản bằng float
2. Hỗ trợ rộng rãi từ trình duyệt:
   • float được hỗ trợ bởi tất cả các trình duyệt hiện đại, bao gồm cả các phiên bản cũ
3. Linh hoạt trong bố cục:
   • Khả năng tạo ra các bố cục đa dạng, bao gồm bao quanh hình ảnh với văn bản và tạo bố cục nhiều dòng

Nhược điểm

1. Khó khăn trong quản lý bố cục phức tạp:
   • float có thể tạo ra các vấn đề khi tạo ra các bố cục phức tạp, đặc biệt khi cần căn chỉnh theo chiều dọc
2. Vấn đề với chiều cao của phần tử cha:
   • Các phần tử cha có thể bị "sập" nếu tất cả các phần tử con của nó nổi. Điều này đòi hỏi sử dụng các kỹ thuật như clearfix để khắc phục
3. Lỗi thời:
   • Các phương pháp hiện đại như Flexbox và Grid cung cấp các cách mạnh mẽ và linh hoạt hơn để tạo bố cục

Ví dụ tạo bố cục bằng float và clear

Tạo bố cục hai cột bằng float và clear.

Trong ví dụ này, chúng ta tạo ra một bố cục hai cột với thanh bên (.sidebar) và nội dung chính (.main). Các phần tử .sidebar và .main nổi sang trái, và phần tử .footer với clear: both; ngăn cản việc bao quanh.

    
      .container {
        width: 100%;
      }

      .sidebar {
        float: left;
        width: 25%;
        background-color: lightblue;
        padding: 10px;
      }

      .main {
        float: left;
        width: 75%;
        background-color: lightgreen;
        padding: 10px;
      }

      .footer {
        clear: both;
        background-color: lightcoral;
        padding: 10px;
        text-align: center;
      }
    
  

    
      <div class="container">
        <div class="sidebar">Sidebar Content</div>
        <div class="main">Main Content</div>
        <div class="footer">Footer Content</div>
      </div>
    
  

Việc sử dụng float và clear vẫn là một công cụ quan trọng trong kho vũ khí của các nhà phát triển web, mặc dù có sự xuất hiện của các phương pháp hiện đại hơn. Hiểu cách chúng hoạt động giúp hỗ trợ và cập nhật các dự án cũ, cũng như trong việc tạo ra các bố cục đơn giản. Các phương pháp hiện đại như Flexbox và Grid thường được ưa chuộng hơn để tạo ra bố cục phức tạp và linh hoạt, nhưng hiểu biết về float và clear vẫn còn giá trị.