Đang chuẩn bị liên kết để tải về tài liệu:
CSS-Bài 8- Float, Clear
Đang chuẩn bị nút TẢI XUỐNG, xin hãy chờ
Tải xuống
| Bài 8- Float Clear 1. 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 Dàn qua trái. - Right Dàn qua phải. - None Bình thường. Bài toán Sử dụng div kết hợp với CSS xây dựng website như hình dưới. Hướng dẫn Xây dựng 2 cặp thẻ div tương ứng với 2 thành phần trong hình. Sử dụng float cho thành phần bên trái dàn sang bên trái. sau khi làm xong các bạn có thể xem đáp án tại http jsbin.com aputaj 1 edit Cột ưái IE Bài 8- Float Clear 2. Clear Là thuộc tinh 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 dung để tránh tràn các thành phần trong website. Ví dụ http jsbin.com ibaqev 1 edit DOCTYPE html html head meta charset utf-8 title 3S Bin title style imgí float left VIETSOURCE NỘI DƯNG NÀY SÈ BỊ TRÀN lên KHI ĐẬT FLOAT CHO ÀNH TRÊN style head body img 5rc http vietsource.net banner.png width 150 P NỘI DUNG NÀY SẼ BỊ TRÀN lên KHI ĐẶT FLOAT CHO ẲNH TRÊN p body html Lập trình Mã nguồn 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 vấn đề này chúng ta đặt 1 thành phần vào giữa 2 thành phần trên giữa thẻ img và thẻ p sau đó cho thành phần này clear both. Ví dụ br class clear hoặc div class clear div hoặc . Sau đó sử dụng .clear clear both Xem kết quả http jsbin.com ibaqev 2 edit r.nnvriaht Sì 2M 9 VIPTAOl IRC.F NPT Bài 8- Float Clear Bài tập Thiết kế website như hình bên dưới sử dụng css Không dung table với tên các thành phần và kích thước cho trước. Xem thêm nội dung http bit.ly vsnet-float-clear 01 -footerwidth 100 height 20 - wrapper đặt width 960px height 900px background tuỳỷ - header đặt width 100 heỉght 20 - content width 100 height 60 background tuỳ ý Border red -