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 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. 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 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. http://www.izwebz.com/css/clear-va-float/[8/10/2010 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. http://www.izwebz.com/css/clear-va-float/[8/10/2010 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. 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 »'); ?> </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. http://www.izwebz.com/css/clear-va-float/[8/10/2010 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. 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) © 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 . -></p> 10 </div><! End #bao_quanh > 1 .clear {clear: both;} 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] Sở dĩ biện pháp. {margin-left: 150px;background: #faf3c7;} 2 img {float: left;} 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] here. Join Free now! www.your-site.com Your. 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