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>

DXOan

Đây chính là tôi với sự bùng nổ của những giấc mơ. Tôi thích khám phá và chia sẻ những điều mới mẻ. Hãy đồng hành cùng tôi nhé ! 😁😘😍 - Con đường tôi đi là con đường tôi chọn - 😎😂✌ facebook twitter pinterest youtube external-link

Đăng nhận xét

Vui lòng đưa ra những nhận xét tích cực, mang tính xây dựng.*

Mới hơn Cũ hơn

AdBlock Detected!

Phát hiện trình duyệt đang sử dụng AdBlock. Vui lòng tắt AdBlock để có thể xem nội dung cũng như ủng hộ tác giả. DXOan xin cảm ơn. Chúc bạn một ngày vui vẻ !