Clear và Float | Học thiết kế web theo chuẩn.
http://www.izwebz.com/css/clear-va-float/[8/10/2010 3:02:54 PM]
NAVIGATION
Bạn nên dùng XML Sitemap cho trang web
Bạn nên sử dụng IE Tester
Không nên lạm dụng quảng cáo
HTML Cơ bản – Phần 1
Căn bản PHP – Bài 4 – Phần 2
Đừng làm nửa chừng rồi ngưng
Chương 2 – jQuery Selectors
Tạo WordPress Theme – Custom Page
Giới thiệu về CSS
Pseudo Class
PHP CO BẢN – NÂNG CAO
tìm hiểu cú pháp và phương thức PHP
Phép toán và phát biểu có điều kiện trong php
$_POST và $_GET
Làm quen đối tượng Session
Khai báo hàm, chèn tập tin và tập tin dùng chun
Cách xử lý chuỗi, mảng, kiểu DataTime
Thao tác trên cơ sở dữ liệu MySQL
PHP và Database
Phân trang với PHP
Xóa, Cập nhật dữ liệu dạng mảng
Tạo Mailing List: PHP & Mysql
RECENT COMMENTS
Random News Popular
EMAIL ARTICLES
Clear và Float
October 9, 2008 7 comments
Clear và Float là kỹ thuật dùng rất nhiều trong thiết kế giao diện bằng

Các thể loại
WordPress
Tutorials, Hacks
HOME CÂU HỎI THƯỜNG GẶP LIÊN HỆ TÁC GIẢ BẢN QUYỀN
Clear và Float | Học thiết kế web theo chuẩn.
http://www.izwebz.com/css/clear-va-float/[8/10/2010 3:02:54 PM]
QUẢNG CÁO
Your Ad Here for Free
$20 in Free Clicks to place your ad
here. Join Free now!
www.your-site.com
Your Ad Here for Free
$20 in Free Clicks to place your ad
Tạo WordPress Theme – Dựng xHTML (16)
chicken_roll: hahaha hay quá hết chổ trê (thanks you
very much much…) nghe anh nói đây ko
Tạo WordPress Theme – Slice hình (22)
chicken_roll: ui ui hay quá cảm ỏn nhiều học rất nhiều
từ anh và Anh CS thanks phát cho có
Tạo WordPress Theme – Search form và Random
Posts (15)
DiVIVu: @ajimoto & tuyen: Làm thế này là được bạn ạ:
<script type="text/javascript&
PHP Căn Bản – Bài 9 (40)
pham duy: Vang ban angelthao_0984884679 da noi
dung do chung t con chan chu gi nua ma khong giup
doan: ai muốn xem bằng file swf thì down KMP về mà
dùng cái này còn hay hơn media của win nhiều
Lập trình web và sự Lười nhác (23)
kien: Không còn gì để nói :-s

www.your-site.com
Your Ad Here for Free
$20 in Free Clicks to place your ad
here. Join Free now!
www.your-site.com
Your Ad Here!
BIDVERTISER ADS
vậy bạn cần sử dụng Clear để “dọn sạch” nó đi.
Ở ví dụ dưới đây tôi có 2 đoạn văn và 2 tấm hình. Nếu bạn cho tất cả các thành phần đều
float: left bạn 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ôi sẽ hướng dẫn bạn cụ thể hơn trong video tutorial về Clear và Float. Còn bây giờ đây
là cách phổ biến nhất và cũng gây ra nhiều tranh cãi nhất.
Để đạt được mục đích sao cho tấm hình và đoạn văn thứ 2 “ngoan ngoãn” chịu chui xuống
dưới, chúng ta sẽ thêm một thẻ div trống vào dưới đoạn văn thứ nhất.
Sau đó ở trong CSS, bạn chỉ việc thêm đoạn code sau:
Với một thẻ <div> và một class dùng để clear, bây giờ thì nó sẽ xuất hiện như ý rồi
01 <div id='bao_quanh'>
02 <img src="images/ball.png" alt="ball" />
03 <h3>Clear và Float</h3>
04 <p><!- -Nội dung bị cắt ngắn - -></p>
05
06 <div class="clear"></div><!- - Thẻ div trống với class="clear"- ->
07
08 <img src="images/ball.png" alt="ball" />
09 <p><!- -Nội dung bị cắt ngắn - -></p>
10 </div><! End #bao_quanh >
1 .clear {clear: both;}

Compatible Implant
Trilobe Compatible Implant The $145.00 Alternative
www.BlueSkyBio.com
Clear và Float | Học thiết kế web theo chuẩn.
http://www.izwebz.com/css/clear-va-float/[8/10/2010 3:02:54 PM]
7 Comments
( Comment bài này )
« Position Property Độ lớn thực sự của Box »
Những bài viết có liên quan
Clear và Float (video)
Absolute Position trong thiết kế giao diện
Thứ bậc trong XHTML
Box Model
Độ lớn thực sự của Box
Phùng Anh Tú says:
March 14, 2010 at 10:29 pm
Mọi người cho em hỏi là khi em làm cái post thumnail, mặc dù đã để ảnh là foat:left,
nhưng vì sao phần chữ vẫn không chui lên chếm chỗ :-/
Xem hình:
http://img682.imageshack.us/img682/7655/visaoc.jpg
Code của em như sau:
<div class="entry">
<?php
if ( has_post_thumbnail() )
the_post_thumbnail(array( 70,70 ), array( 'class' => 'alignleft' ));
else
echo '';
?>
<?php the_excerpt('Read the rest of this entry &raquo;'); ?>
</div>

Bạn vui tính đừng có nghĩ xấu như vậy, đó cũng là tình trạng các trang web ở VN bây
jo, có đến 99% là cop bài nhau rồi làm của mình. Như những trang khá nổi như:
dantri.com.vn, vnexpress.net, ngoíao.net… mà còn có tình trạng đó cơ mà.
Reply
Trần quốc vĩnh says:
April 26, 2010 at 2:58 am
Bài viết hay, ngắn gọn xúc tích, cảm ơn tác giả nhiều
Reply
cuong says:
May 28, 2010 at 5:50 am
Anh ơi em muốn hỏi cái này mà ko biết post ở đâu, em có 1 bài tập tạo 1 trang web
layout bằng table, khi em gõ 1 đoạn văn bản vào 1 ô trong table dài hơn chiều rộng
đã định trước thì cái table đó lại dãn ra làm hỏng hết layout. Anh có thể chỉ cho em
biết làm sao để cố định kích thước của nó ko ạ, cố định nhưng có thể dãn ra khi Ctrl+
nha anh
. Thanks
Reply
Tên bạn
Clear và Float | Học thiết kế web theo chuẩn.
http://www.izwebz.com/css/clear-va-float/[8/10/2010 3:02:54 PM]
Chọn kiểu gõ: Tự động TELEX VNI Tắt
Email
Website
Comment
Luu ý khi post comment:
Không "bóc tem" topic
Dùng lời lẽ có văn hoá và lịch sự
Xem trang FAQs trước khi hỏi
Bạn có thể dùng thẻ HTML như:<strong>, <em>, <a>
Wrap code trong dấu `backtick` (dấu trên phím Tab)