CHƯƠNG 4: CASCADING STYLE SHEETS 4.1 Giới thiệu
4.4.11 Float và Clear
Clear và Float là kỹ thuật dùng rất nhiều trong thiết kế giao diện bằng CSS với hai tính năng cùng tên là Clear và Float. Float dùng để tách một thành phần bất kỳ khỏi cách hiển thị thông thường của nó để tạo chỗ cho những thành phần ở sau di chuyển lên và phủ đầy chỗ trống nếu có. Clear dùng để ngăn không cho thành phần ở dưới di chuyển lên trên để lấp vào chỗ trống.
Ví dụ ta có 2 đoạn văn bản, ta chỉ muốn đoạn văn thứ nhất bao quanh hình ảnh và đoạn văn thứ hai thì vẫn nằm ở dưới. Theo luật trên thì cứ có chỗ trống là đoạn văn thứ 2 cũng sẽ tràn lên để lấp chỗ trống. Nếu bạn không muốn điều này xảy ra bạn có thể sử dụng Clear để nó không tràn lên được.
Float
dụ dưới đây sẽ bao gồm một hình logo và một đoạn văn bản, hình được float: left và đoạn văn bản được giữ nguyên.
img {float: left;}
Để tạo được hiệu ứng này bạn cần có một thẻ <img> và <p> <div id='bao_quanh'>
<img src="images/ball.png" alt="ball" /> <h3>Box Model</h3>
<p>Tạo thẻ div bao quanh là cách để bạn quản lý độ rộng thực sự của box. cho dù khi tôi thêm giá trị padding bằng 5px vào mỗi bên trái phải, nó cũng không làm tăng độ lớn. Mà ngược lại, nó sẽ bị đầy lùi vào biên là 5px .</p>
</div><!--End #bao_quanh-->
Như vậy khi ta cho tấm hình float: left ta khiến nó bị dịch chuyển sang phía tận cùng bên trái (hoặc phải nếu float: right) so với thẻ mẹ của nó là div id=”bao_quanh”. Đoạn văn bản cũng sẽ di chuyển tương tự so với thẻ mẹ của nó, do đó tạo ra hiệu ứng bao quanh lấy hình ảnh. Cho nên nếu ta không muốn chữ bao quanh hình nữa mà muốn nó tạo ra 2 cột song song với nhau chỉ cần tăng giá trị margin-left cho đoặn văn thành 150px.
p {margin-left: 150px;background: #faf3c7;} img {float: left;}
Khi cho tấm hình float sang bên trái và đoạn văn bản có lề trái bằng với độ lớn của tấm hình, thì hiệu ứng bao xung quanh hình sẽ mất đi mà thay vào đó ta được 2 cột song song với nhau. Đây là nguyên lý cơ bản nhất để tạo ra giao diện có nhiều cột sử dụng float. Miễn là mỗi thành phần khi được float đều có một giá trị độ rộng nhất định thì nó sẽ xếp song song với nhau và tạo ra cột (nếu diện tích đủ rộng). Nếu làm như vậy với 3 thẻ <div> float: left và có độ rộng nhất định sẽ được 3 cột song song. Sau đó có thể thêm các thành phần vào từng cột để tạo nên giao diện.
Clear
Luôn đi chung với Float là Clear. Clear thực chất chỉ là một tính năng chống không cho đoạn văn ở dưới tràn lên trên để lấp vào chỗ trống. Như đã nói ở trên, khi dùng float có thể tạo ra hiệu ứng chữ bao xung quanh hình. Nhưng đôi khi vì dư chỗ, cho nên đoạn văn ở dưới di chuyển lên trên và lấp vào chỗ trống. Tất nhiên đó không phải là điều mong muốn, do vậy cần sử dụng Clear để xử lý vấn đề này nó đi.
Ở ví dụ dưới đây với 2 đoạn văn và 2 tấm hình. Nếu cho tất cả các thành phần đều float: left sẽ thấy nó bị như hình dưới đây.
Lý do là vì tất cả các thành phần đều được float: left do vậy hình và đoạn văn ở dưới nó sẽ cố phủ đầy chỗ trống mà tấm hình và đoạn văn thứ nhất để lại khi bị float: left. Và cũng chính vì lẽ đó mà tạo ra hiệu ứng ta không mong đợi. Có nhiều cách xử lý vấn đề này.
Để đạt được mục đích sao cho tấm hình và đoạn văn thứ 2 lui xuống dưới, ta sẽ thêm một thẻ div trống vào dưới đoạn văn thứ nhất.
<div id='bao_quanh'>
<img src="images/ball.png" alt="ball" /> <h3>Clear và Float</h3>
<p><!--Nội dung bị cắt ngắn --></p>
<div class="clear"></div><!-- Thẻ div trống với class="clear"-->
<img src="images/ball.png" alt="ball" /> <p><!--Nội dung bị cắt ngắn --></p> </div><!--End #bao_quanh-->
Sau đó ở trong CSS, bạn chỉ việc thêm đoạn code sau: .clear {clear: both;}
Với một thẻ <div> và một class dùng để clear, bây giờ thì trang sẽ xuất hiện như ý
Sở dĩ biện pháp này gây tranh cãi là vì chúng ta thêm một thành phần không phải là nội dung vào phần nội dung cốt để đạt được mục đích. Điều này đi ngược lại với nguyên lý của CSS là tách rời nội dung khỏi cách trình bày. Cho nên nếu bạn không muốn có một thẻ div trống trong code HTML của mình bạn cũng có thể làm theo cách dưới đây.
Sử dụng clearfix
Cách sử dụng clearfix khá phổ biến hiện nay bằng cách sử dụng một lớp css. .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both;
height: 0; }
* html .clearfix { zoom: 1; } /* IE6 */ *:first-child+html .clearfix { zoom: 1; } /* IE7 */
Bây giờ nếu muốn clear nó thì không phải tạo một thẻ div trống nữa mà chỉ việc khai báo class=”clearfix” vào thẻ mẹ chưa các thành phần float. Trong ví dụ ở trên bạn thêm vào phần sau
<div id="bao_quanh" class="clearfix">
Với cách này bạn không cần phải thêm một thẻ div nữa mà vẫn thể hiện được như ví dụ trên.