Bài 13: Float & Clear

1. Thuộc tính float
- Là thuộc tinh sử dụng để cố định thành phần của website về 1 phía: trái (left) hay phải (right).
- Thường sử dụng trong việc dàn trang, chia cột cho website.
- Giá trị :
+ Left: Cố định phần tử về bên trái.
+ Right: Cố định phần tử về bên phải.
+ None: Bình thường.


Ví dụ: thực hiện float ảnh logo sang trái.

#logo { float:left; }

Một ví dụ khác là chúng ta sẽ dùng float để chia 2 cột văn bản.

.column1, .column2 {
                     width:45%;
                     float:left;
                     text-align:justify;
                     padding:0 20px;
                   }
.column1 {
           border-right:1px solid #000
         }

2. Thuộc tính clear
- Là thuộc tính sử dụng cho các thành phần đi cùng các thành phần sử dụng float. Sử dụng để định dạng cách tràn cho thành phần này khi thành phần trước nó đặt float và còn khoảng trống.
- Giá trị :
+ Left: Tràn sang trái.
+ Right: Tràn phải.
+ Both: Không tràn, thường dùng để tránh tràn các thành phần trong website.
+ None: Mặc định

Ví dụ:

<style>
    img{ float: left;}
</style>
  <img src="http://dxoan.blogspot.com/logo.jpg" width="150" />
  <p>NỘI DUNG NÀY SẼ BỊ TRÀN LÊN KHI ĐẶT FLOAT CHO ẢNH TRÊN</p>

Khi đặt float cho ảnh thì phần bên phải ảnh còn khoảng trống nên các thành phần bên dưới sẽ tràn lên để lấp đầy chỗ trống đó. Để giải quyết ta làm như sau: ( có thể dùng <br class="clear" /> hoặc <div class="clear" /> )

<style>
    img{ float: left;}
    .clear{ clear: both;}
</style>
  <img src="http://dxoan.blogspot.com/logo.jpg" width="150" />
  <div class="clear" />
  <p>NỘI DUNG NÀY SẼ BỊ TRÀN LÊN KHI ĐẶT FLOAT CHO ẢNH TRÊN</p>