clear và float _ học thiết kế web theo chuẩn.

Clear và Float | Học thiết kế web theo chuẩn.
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

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ụ bạn có 2 đoạn văn bản, bạn 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ỗ 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.
1. Float
Float chủ yếu dùng để căn chỉnh hình ảnh sao cho chữ sẽ bao quanh hình ảnh. Nhưng nó
cũng được áp dụng nhiều trong việc thiết kế giao diện sử dụng CSS. Ở ví dụ dưới đây sẽ
bao gồm một hình logo của izwebz và một đoạn văn bản. Tôi sẽ cho hình được float:
left và đoạn văn bản được giữ nguyên.
Để tạo được hiệu ứng này bạn cần có một thẻ <img> và <p>
1 img {float: left;}
1 <div id='bao_quanh'>
2 <img src="images/ball.png" alt="ball" />
3 <h3>Box Model</h3>
4 <p>Tạo thẻ div bao quanh là cách để bạn quản lý độ rộng thực
5 sự của box. cho dù khi tôi thêm giá trị padding bằng 5px vào
6 mỗi bên trái phải, nó cũng không làm tăng độ lớn. Mà ngược lại,
7 nó sẽ bị đầy lùi vào biên là 5px .</ p>
8 </div><! End #bao_quanh >
CSS
CSS Cơ bản
jQuery
jQuery Cơ bản
Phát triển Web
Bài viết, kinh nghiệm
Videos

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.
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

Tạo trang web đầu tiên (41)
ho nga: ?
ho nga: huhu sao làm web mệt dzữ vậy a hai ui…?
Tóm lại khi bạn cho tấm hình float: left bạn 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 bây giờ bạn 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, bạn chỉ cần tăng giá trị
margin-left cho đoặn văn thành 150px.
Khi bạn 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 đó bạn đượ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 bạn làm như vậy với 3 thẻ <div>
float: left và có độ rộng nhất định, bạn sẽ được 3 cột song song. Sau đó bạn có thể
thêm các thành phần vào từng cột để tạo nên giao diện.
2. 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 bạn dùng float bạn 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 bạn muốn, do
1 p {margin-left: 150px;background: #faf3c7;}
2 img {float: left;}
Clear và Float | Học thiết kế web theo chuẩn.
3:02:54 PM]
here. Join Free now!
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 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;}

Clear và Float | Học thiết kế web theo chuẩn.
3:02:54 PM]
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
Bạn copy đoạn code sau và cho vào stylesheet
Bây giờ nếu bạn muốn clear nó thì bạn 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
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 hiện ngon lành. Cho đến bây
giờ cách này cũng rất phổ biến vì nó hiển thị tốt trên mọi trình duyệt.
Tôi cũng có làm một Video tutorial về chủ đề này, bạn có thể tham khảo thêm.
Cá nhân tôi vẫn luôn sử dụng phương pháp này bởi vì nó đơn giản, gọn nhẹ và không cầu
kỳ. Chỉ có một thẻ div trống thêm vào phần nội dung cũng chẳng chết ai >”<. Chắc có lẽ phải
chờ đến khi CSS3 ra đời và có cách khắc phục tốt hơn và dễ dàng hơn.
01 .clearfix:after {
02 visibility: hidden;
03 display: block;
04 font-size: 0;
05 content: " ";
06 clear: both;
07 height: 0;
08 }
09 * html .clearfix { zoom: 1; } /* IE6 */
10 *:first-child+html .clearfix { zoom: 1; } /* IE7 */
1 <div id="bao_quanh" class="clearfix">

Compatible Implant
Trilobe Compatible Implant The $145.00 Alternative
www.BlueSkyBio.com
Clear và Float | Học thiết kế web theo chuẩn.
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:
/>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>
Đoạn code trên nằm trong file index.php

và cái đoạn code css như sau:
.alignleft {
float: left;
padding:0 0 0 80px;
}
Nhưng sao nó không được (
Mọi người giúp em nhé. Em đã đọc bài post thumbnail của anh DW rồi.
Reply
Clear và Float | Học thiết kế web theo chuẩn.
3:02:54 PM]
Leave a comment
( Chọn hình đại diện )
Quang Chương says:
April 5, 2010 at 6:56 pm
Hic! cũng biết CSS rồi nhưng đọc vẫn thấy hay, mà hình như em đọc một bài giống y
như bài anh ở một Forum VN, nhìn mấy cái hình thấy quen, chắc tụi nó cóp trộm bài
a rồi post lên lòe thiên hạ.
Reply
vui tính says:
April 7, 2010 at 6:16 am
Nói thật hay nói kháy tác giả bài viết này thế =))
Reply
Demon Warlock says:
April 7, 2010 at 6:30 am
Em yên tâm là nếu anh có đăng lại bài viết của ai đó, anh đều trích dẫn nguồn. Cho
nên bài viết em đọc lần trước mà giống hình thì có thể là họ copy của anh.
Reply
Quang Chương says:
April 7, 2010 at 10:25 pm
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.
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)
© 2008-2010 izwebz, All Rights Reserved. BACK TO TOP Powered by WordPress | Hand coded and designed by Demon Warlock

Izwebz is solemnly hand coded and designed
from scratch by Demon Warlock. It is also very
proud of being powered by WordPress, which
is an exceptionally well written and beautiful
CMS
Rules are not made to be broken at Izwebz
Bạn không được tự ý copy và phát hành
lại nội dung của izwebz nếu chưa được sự
đồng ý của tôi.
Biết tôn trọng và cư xử hòa nhã với mọi
người
Không "bóc tem" bài viết.
Izwebz được quyền xóa những comment
nào không phù hợp với nội dung của trang
web
Câu hỏi thường gặp
Liên hệ
Tác giả
Bản quyền
Trang web vẫn đang trong quá trình phát triển
về nội dung. Do vậy nếu bạn có khả năng hãy
đóng góp bài viết hoặc bạn có thể quảng cáo
trang web đến những người mà bạn biết.
Được vậy tôi sẽ rất biết ơn bạn.
Submit