• fans
  • 1036 reader
  • followers

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.

img {float: left;}

Để tạo được hiệu ứng này bạn cần có một thẻ <img> và <p>

<div id='bao_quanh'>
<img src="images/ball.png" alt="ball" />
   <h3>Box Model</h3>
  <p>Tạo thẻ div bao quanh là cách để bạn quản lý độ rộng thực 
sự của box. cho dù khi tôi thêm giá trị padding bằng 5px vào 
mỗi bên trái phải, nó cũng không làm tăng độ lớn. Mà ngược lại, 
nó sẽ bị đầy lùi vào biên là 5px .</p>
</div><!--End #bao_quanh-->
clear and float CSS

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.

p {margin-left: 150px;background: #faf3c7;}
img {float: left;}
Clear and Float CSS

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

Clear and Float CSS

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.

<div id='bao_quanh'>
<img src="images/ball.png" alt="ball" />
   <h3>Clear và Float</h3>
  <p><!--Nội dung bị cắt ngắn --></p>

<div class="clear"></div><!-- Thẻ div trống với class="clear"-->

<img src="images/ball.png" alt="ball" />
   <p><!--Nội dung bị cắt ngắn --></p>
</div><!--End #bao_quanh-->

Sau đó ở trong CSS, bạn chỉ việc thêm đoạn code sau:

.clear {clear: both;}

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

Clear and Float CSS

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

.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

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

<div id="bao_quanh" class="clearfix">

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.

Demon Warlock Website facebook twitter user_email

Tôi được sinh ra ở Việt Nam, nhưng hiện tại đang sống và làm việc tại Mỹ. Ngành tôi học không có liên quan gì đến thiết kế web. Nhưng đây là sở thích từ ngày còn là sinh viên du học, do vậy bây giờ dù cho đang đi làm nhưng tôi vẫn thích dùng thời gian rảnh rỗi của mình để học về thiết kế web. Như các bạn, tôi cũng việc mày mò tự học và khám phá.

  • Pingback: Những thủ thuật giúp trang web tương thích nhiều trình duyệt

  • itpro

    Nhờ mọi người sửa giúp mình cái div 3 cột này với, phần nội dung ở giữa khi mà mình dùng .clr{clear: both;} ở 1 thẻ bất kỳ thì nó đẩy toàn bội nội dung ở giữa xuống bên dưới navar, làm thế nào để dùng clr{clear: both;} ở phần giữa mà nội dung phần giữa ko bị đẩy xuống dưới menu. Nếu ko dùng clr{clear: both;} thì phần nội dung bị tràn lên trên như code

    ===========================================

    body
    {
    font-family: .8em vedana, Arial, Sans-Serif;
    }
    *
    {
    margin: 0;
    padding: 0;
    }
    ul
    {
    list-style: none;
    margin: 0;
    padding:0;
    display: inline;
    }
    li
    {
    list-style-type: none;
    text-decoration: none;
    }
    #main_wrapper
    {
    min-width: 790px;
    max-width: 990px;
    margin-left: auto;
    margin-right: auto;
    background: #4BB9F4;
    }
    #header
    {
    width: auto;
    background: #F9FF66;
    }
    #threecolwrap
    {
    float: left;
    width: 100%;
    background: #FF7366;
    }
    #twocolwrap
    {
    float: left;
    width: 100%;
    display: inline;
    margin-right: -250px;
    background: #66FF99;
    }
    #nav
    {
    float: left;
    width: 200px;
    height: 800px;
    display: inline;
    background: #094090;
    }
    #content
    {
    width: auto;
    margin-left: 200px;
    margin-right: 250px;
    background: #00CC33;
    }
    #promo
    {
    float: left;
    width: 250px;
    background: #DBAB24;
    }
    #footer
    {
    float: left;
    width: 100%;
    clear: both;
    background: #33BDCC;
    }

    #cot
    {
    width: auto;
    border: #000000 1px solid;
    }
    #cot1
    {
    float: left;
    width: 200px;
    height: 100px;
    display: inline;
    border: #000000 1px solid;
    }
    #cot2
    {
    width: auto;
    height: 50px;
    border: #000000 1px solid;
    margin-left: 200px;
    }
    #cot4
    {
    width:auto;
    height: 100px;
    background: #CCCCCC;
    margin-top: 10px;
    }
    .clr{clear: both;}

    Phan dau trang

    Thanh dieu huong trai

    Link1

    Bo cuc 3 cot linh hoat

    sfsdf
    sfsdf

    Đẩy cái div này ở phía dưới div id=”cot” mà không được, nó cứ bị tràn nội dung lên phần trên
    Tên sản phẩm:  Nina Ricci – NiNa (Women)Loại sản phẩm:  Nước hoa NữNhãn hiệu:  Nina RicciMùi hương đặc trưng:Chanh Calabrian, Chanh lá cam Caipirinha, Táo ngọt, Mẫu đơn, Kẹo hạt dẻ, Gỗ táo, Tuyết tùng trắng, Xạ hương.Phong cách: Lãng mạn, hiện đại, độc đáo.Năm Phát hành: 2006

    Phan quang cao

    CopyRight PhamTung

  • Nguyễn hải ninh

    em đang làm layout css. cũng mới biết sơ sơ về float nhưng em chưa thấy web này nói cụ thể như các anh

  • Nguyễn Thành Việt

    Hey Demon warlock you’re so great, thanks for your nice marvellous tutorials.

  • http://www.sieutienich.com Hà Trinh

    Em tạo CSS như sau:

    /*web-ban-hang*/
    body{
    background-image:url(../images/bg_03.gif);
    }
    .banner
    {
    width:933px;
    height:144px;
    background-color:#FFFFFF;
    margin:0 auto;
    }
    .banner-left{
    width:230px;
    float:left;
    }
    .banner-right{
    width:703px;
    float:right;
    }
    .main{
    width:933px;
    background-color:#FFFFFF;
    margin:0 auto;
    height:auto;
    }
    .clear
    {
    clear:both;
    }
    .sidebar
    {
    width:230px;
    float:left;
    }
    .content
    {
    float:right;
    width:703px;
    }
    [/SIZE]

    - HTML như sau:

    side-bar
    content

    - Mọi người cho mình hỏi tại sao ở dòng chữ side-bar và content phải có nền màu trắng của main nhưng kết quả lại lấy nền của body

    Vậy bây giờ em phải sửa như thế nào để main bao trùm cả sidebar và content ???

    • http://vvnweb.com Sockytil

      Bạn up lên file html & Css cho mình xem sao.

    • http://localhost thanh

      Bạn thêm vào .main thuộc tính overflow: hidden; thử xem.

  • http://www.depla.net Crazy KV

    Cho em hỏi trong mấy Video tutorial!

    Cái overflow: hidden

    Lúc thì DW lại dùng overflow: auto

    Nghĩa là thế nào các bạn?

    • http://vvnweb.com Sockytil

      Bạn copy đoạn code này bỏ vào và save lại file co đuôi .html bạn sẽ rõ mình cũng ko biết giải thích sao.

      div.auto
      {
      background-color:#00FFFF;
      width:100px;
      height:100px;
      overflow:auto;
      }

      div.hidden
      {
      background-color:#00FF00;
      width:100px;
      height:100px;
      overflow:hidden;
      }

      The overflow property specifies what to do if the content of an element exceeds the size of the element’s box.

      overflow:auto
      You can use the overflow property when you want to have better control of the layout. The default value is visible.

      overflow:hidden
      You can use the overflow property when you want to have better control of the layout. The default value is visible.

  • http://TSL Trần Sáng Lập

    Woa website của bạn ra cũng lâu rồi mà mình chưa từng vô luôn , tình cờ hôm nay đọc báo e-chip thấy giới thiệu nên mới vô thử , một trang web bổ ích , mình có chút ideal về float và clear trong bài viết này , mà bài này post cũng lâu rồi nên cái ideal của mình chắc cũng không có hữu dụng lắm hehe , trong video hướng dẫn bạn có chỉ 2 cách 1 là dùng 2 là dùng overflow:hidden , mình xin bổ sung thêm là có thể Float : left hay right gì đó div container thì nó cũng có thể bao hết nội dung bên trong của div được , thanks bạn nhiều vì bạn đã chia sẽ kiến thức một cách thân thiện không ích kỹ hehe , làm như bạn là người việt định cư bên nước ngoài thì phải .

  • cuong

    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 :D. Thanks

  • http://alovitinh.com Trần quốc vĩnh

    Bài viết hay, ngắn gọn xúc tích, cảm ơn tác giả nhiều

  • Quang Chương

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

  • Quang Chương

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

    • vui tính

      Nói thật hay nói kháy tác giả bài viết này thế =))

    • http://www.izwebz.com Demon Warlock

      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.

  • http://ebook24h.co.cc Phùng Anh Tú

    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:
    `__abENT__lt;div class=__abENT__quot;entry__abENT__quot;__abENT__gt;
    __abENT__lt;?php
    if ( has_post_thumbnail() )
    the_post_thumbnail(array( 70,70 ), array( __abENT__apos;class__abENT__apos; =__abENT__gt; __abENT__apos;alignleft__abENT__apos; ));
    else
    echo __abENT__apos;__abENT__apos;;
    ?__abENT__gt;
    __abENT__lt;?php the_excerpt(__abENT__apos;Read the rest of this entry __abENT__amp;raquo;__abENT__apos;); ?__abENT__gt;

    __abENT__lt;__abENT__#8260;div__abENT__gt;`
    Đoạn code trên nằm trong file index.php
    và cái đoạn code css như sau:
    `__abENT__#46;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.

Newbie

Các series nên xem trên izwebz cho newbie

Khi vào izwebz chắc nhiều bạn cho rằng các bài viết trên izwebz đều không có hệ thống gì cả? Thực chất, các bài biết đều đi theo một series của riêng nó, ví dụ như PHP, HTML & CSS, PSD2HTML, Photoshop, illustrator,… Trong bài viết này, mình sẽ tổng hợp lại các series bài viết cần thiết cho một newbie.

Izwebz facebook group

Social connect

Recent Comments

Archives