Lý thuyết ““float”” trong CSS: những điều bạn nên biết

Khái niệm ““float”” có thể là một trong những khái niệm mơ hồ nhất trong CSS. Các “float” thường bị hiểu sai là float tất cả các ngữ cảnh xung quanh và gây ra các vấn đề trong việc đọc và sử dụng. Tuy nhiên, nguyên nhân dẫn đến những vấn đề này không phải từ lý thuyết mà là ở cách các chuyên viên thiết kế và các trình duyệt thực hiện lý thuyết đó… Khái niệm ““float”” có thể là một trong những khái niệm mơ hồ nhất trong CSS. Các “float” thường bị hiểu sai là float tất cả các ngữ cảnh xung quanh và gây ra các vấn đề trong việc đọc và sử dụng. Tuy nhiên, nguyên nhân dẫn đến những vấn đề này không phải từ lý thuyết mà là ở cách các chuyên viên thiết kế và các trình duyệt thực hiện lý thuyết đó.

Nếu nhìn vào lý thuyết “float” kĩ hơn, bạn sẽ thấy nó không phức tạp như bạn tưởng. Hầu hết những vấn đề liên quan xảy ra do các phiên bản cũ hơn (ví dụ như của) Internet Explorer. Nếu bạn biết những lỗi đó, bạn có thể kiểm soát được việc trình bày thông tin theo một cách phức tạp, sâu sắc, thấu đáo hơn. 

Hãy cùng khắc phục vấn đề và làm rõ một số hiểu lầm thông thường luôn có khi dùng “float”. Chúng tôi đã duyệt qua hàng tá các bài viết liên quan và lựa chọn ra những điều quan trọng nhất bạn nên biết về phát triển các layout dựa trên CSS bằng “float”. Điều gì bạn nên biết về “float”?

    • “Việc thực hành các text chảy tràn xung quanh một bức ảnh đã có từ rất lâu rồi. Đó là lí do tại sao và tại sao CSS cho phép dùng “float” đặc tính. That’s why the ability was added to the Web starting with Netscape 1.1, . Thuật ngữ “float” ám chỉ cách một yếu tố “float” ở một phía, như được miêu tả trong tài liệu “Thêm vào HTML 2.0” đi cùng với đợt phát hành Netscape 1.1.”

float-00.gif

       

      [

Containing Floats

       ]
    • “Một hộp “float” được đặt trong một flow tiêu chuẩn, sau đó được rút ra và chuyển qua trái hoặc phải xa nhất có thể. Phần nội dung có thể chạy dọc bên cạnh “float” […] Khi rút một hộp ra khỏi flow chuẩn, tất cả nội dung nằm trong đó sẽ lờ đi hoàn toàn và không để khoảng trống cho hộp đó.”[Float Positioning ]
    • “Khi bạn “float” một yếu tố, nó trở thành một “block box”. Hộp này sau đó có thể chuyển sang trái hoặc phải trên đường hiện hành. Các lựa chọn markup có thể: left, float: right or float: none.” [Floatutorial: Float Basics ]
    • “Bạn nên đặt một độ rộng cho các mục “float” (trừ khi áp dụng trực tiếp cho hình ảnh có độ rộng tuyệt đối). Nếu không đặt độ rộng, các kết quả sẽ khó đoán trước.” [Floatutorial: Float Basics ]
    • “Hộp “float” nên có một độ rộng xác định, dù là tương đối hay tuyệt đối. Nếu không, nó sẽ điền khối chứa theo chiều ngang, như là nội dung không float, và không để lại khoảng trống cho phần nội dung khác float quanh nó. Thứ hai, không giống như các hộp trong flow chuẩn, các đường viền dọc của hộp float không che lấp các đường viền ở trên hay dưới nó. Cuối cùng, một hộp float có thể chồng lấp lên các hộp “block-level” khác liền kề nó trong flow chuẩn.”

float-02.gif

       

 

      [

CSS Positioning: Floats

     ]
  • “Điều đầu tiên chúng ta cần nhớ là một yếu tố float luôn chuyển qua trái hoặc phải. Không thể tạo một yếu tố float ở giữa, điều này thường khiến cho những người mới bắt đầu thấy nản. Nguyên tắc cơ bản là một yếu tố float chỉ được chuyển sang một hướng bên cạnh.” [Float Layouts ]
  • “Khi chúng ta float một yếu tố, nó được chuyển sang phải hoặc sang trái cho tới khi chạm gờ của khối chứa. Nếu khi đó chúng ta float một yếu tố khác gần đó theo một hướng tương tự, nó sẽ được chuyển cho tới khi chạm vào gờ của yếu tố float trước đó. […] Nếu chúng ta float nhiều yếu tố theo cùng một hướng, chúng sẽ xếp chồng lên, nhưng sớm hay muộn gì chúng ta cũng sẽ hết khoảng trống […] Khi không đủ khoảng trống trên đường, chúng được chuyển xuống dưới cho tới khi vừa vặn.” [Float Layouts ]
  • Các khối chứa hay các hộp chứa: “Một khối chứa là một hộp chứa các yếu tố khác (các hộp con). Khối chứa của một yếu tố có nghĩa là “khối chứa mà yếu tố nằm trong đó.” [Floatutorial ]
  • “Các hộp float sẽ di chuyển sang trái hoặc phải cho tới khi cạnh ngoài của chúng chạm vào gờ của khối chứa hoắc cạnh ngoài của một hộp float khác.” [Floatutorial: Float Basics ]
  • “Trên lí thuyết, hộp được đặt dọc như trong “flow” chuẩn, đỉnh của nó canh lề với đỉnh của hộp line hiện hành. Nhưng theo chiều ngang, nó được chuyển sang trái hoặc phải của khối chứa của nó, xa nhất có thể trong vòng phần đệm của khối đó (giống như nội dung khác). Phần nội dung nội tuyến bao quanh khi đó được cho phép float quanh mặt đối diện.” [CSS Positioning: Floats ]
  • “Vì một “float” trong ở trong flow nên các hộp không định vị tạo ra trước và sau khi hộp float trôi dọc như thể float không hề tồn tại. Tuy nhiên, các hộp line block được tạo ra ngay sau khi làm ngắn lại float để tạo khoảng trống cho hộp float. Bất cứ phần nội dung nào trong đường hiện hành đều được flow lại trong đường có đầu tiên trên phía bên kia của float.”

float-03.gif

      [

W3C Visual Formatting Model

     ]
  • “Nếu không có đủ khoảng trống nganh trên đường hiện hành cho hộp float, nó sẽ di chuyển xuống dưới, từng đường một, cho tới khi có đủ khoảng trống.” [Floatutorial: Float Basics ]
  • “Một hộp float không bao giờ dùng trước cạnh trên của đường mà nó được tạo ra. […] Gờ trên của hộp float được sắp thẳng với giờ trên của hộp đường hiện hành (hoặc với gờ dưới của hộp khối trước đó nếu không có hộp đường).” [Float Layouts ]
  • “Để có thể thực sự hiểu về lý thuyết float, bạn phải hiểu hộp line trong CSS nghĩa là gì. Không may, điều này lại đòi hỏi bạn phải hiểu hộp nội tuyến là gì. […] Một hộp nội tuyến được tạo ra bởi những yếu tố không phải là block-level, như là EM. […] Một hộp line là một hình chữ nhật ảo chứa tất cả các hộp nội tuyến tạo thành một đường trong yếu tố block-level. Ít nhất nó cũng cao bằng hộp line cao nhất.” [Float Layouts ]
  • “Nếu chúng ta đính kèm float: left vào mỗi cột trong yếu tố DIV, chúng sẽ xuất hiện cạnh nhau theo ý chúng ta. Nếu khi đó chúng ta muốn có một chân trang full-width ở cuối, cho dù cột nào dài nhất, chúng ta chỉ cần đặt clear: both trên đó.” [Float Layouts ]
  • “Điều trở ngại khi dùng float là bạn phải dựa vào các trình duyệt để thể hiện một cách nhất quán layout của các yếu tố float được xếp chồng. Tình hình trở nên khó khăn hơn khi những float này là một phần của một layout phức tạp hơn, có thể là một cái dùng float, định vị hoặc bảng.” [Containing Floats ]

Xoá float

    • “ Các yếu tố theo sau một yếu tố float sẽ bao quanh yếu tố float đó. Nếu không muốn điều này xảy ra, bạn có thể áp dụng đặc tính “clear” với những yếu tố theo sau này. Có 4 lựa chọn là: clear: left, clear: right, clear: both or clear: none.” [Floats and “clear” ]
    • Làm thế nào để xoá float CSS mà không cần tới markup thêm – các kĩ thuật khác nhau lần lượt được giải thích. Có 3 phương pháp chính: a) Float cả các yếu tố chứa, b) dùng overflow: hidden trên container, c) Tạo nội dung dùng lớp giả CSS :after. Một trang thử nghiệm kĩ thuật. [Làm thế nào để xoá float CSS mà không cần đến markup thêm ]
    • “Phương pháp tiêu chuẩn để tạo một container bên ngoài đi kèm một float xếp chồng là đặt một yếu tố đã “phát quang” hoàn toàn trong container, nhằm kép gờ thấp của box chứa thấp hơn float.”
    • 1.    <div> <!– float container –> 

 

      2.    <div style=”float:left; width:30%;”><p>Some content</p></div> 

 

      3.    <p>Text not inside the float</p> 

 

      4.    <div style=”clear:both;”></div> 

 

      5.    </div>
    • [Làm thế nào để xoá float mà không cần markup cấu trúc]
    • “ Một vấn đề thường xảy ra với các layout dựa trên float là container của float không muốn căng ra để khớp với float. Nếu bạn muốn thêm vào, giả sử như một đường bao quanh tất cả float (một đường bao quanh container), bạn sẽ phải lệnh cho các trình duyệt bằng cách nào đó căng container re. Bạn có thể xoá float bằng phương pháp tràn bộ nhớ overflow method .”

float-04.gif

       

 

      [

Xoá float

      ]
    • Sử dung :after: , tưởng tượng rằng chúng ta dùng :after để chèn một character đơn giản như một ‘period’, và rồi để yếu tố đó {clear: both;}. Đó là tất cả những gì cần phải làm, nhưng không ai lại muốn một khoảng trống đường làm rối rắm phần cuối của box chứa, vì vậy chúng ta dùng {height: 0;} và {visibility: hidden;} để giữ không cho period của chúng ta khỏi bị hiện ra.
    • 1.    .clearfix:after { 

 

      2.    content: “.”; 

 

      3.    display: block; 

 

      4.    height: 0; 

 

      5.    clear: both; 

 

      6.    visibility: hidden; 

 

      7.    } 

 

    • [How To Clear Floats Without Structural Markup ]
    • Clearfix: “Khi một float được chứa trong một box chứa có đường viền hay nền có thể nhìn thấy, float đó không tự động đẩy gờ đáy của container xuống dưới khi float cao hơn. Thay vào đó, container lờ đi float và float sẽ rủ xuống đáy container như một lá cờ. […] IE/Win có tự động kèm theo một float trong container, nhưng chỉ với điều kiện yếu tố container có một kích cỡ rõ ràng.”
    • [

Easyclearing: How To Clear Floats Without Structural Markup

     ]

Các lỗi CSS float

    • Khi yếu tố chứa có các đường dẫn bên trong thì float cũng vậy. Khi điều này xảy ra và các đường dẫn hovered, hoạt động tự động đính kèm được bật hoặc tắt, khiến cho phần gờ dưới của box chứa đột ngột nhảy tới cuối của phần nội dung không float. Quơ chuột qua những đường dẫn khác sẽ phục hồi lại hoạt động này. Hiệu ứng thú vị này được gọi là IE/Win Guillotine Bug . Togge này chỉ xảy ra khi một :hover được dùng để thay đổi nền đường dẫn hay thay đổi trong tạo kiểu như đệm, lề hay bất cứ kiểu phông nào trên đường dẫn. Lạ thay, thay đổi màu sắc trên hover không tạo lỗi.

float-05.gif

       

 

      [

How To Clear Floats Without Structural Markup

       ]
    • The IE Escaping Floats Bug : “Nếu dùng một box div với các lề, đường viền và một số div float bên trái, bạn sẽ gặp phải hai lỗi hiển thị trên IE Win. Một là container chỉ chứ đường cuối cùng của float và float cũng chạy hết sang phải, tới gờ bên phải của màn hình. Điều này cũng tạo ra một thanh cuốn ngang ở nhiều cỡ màn hình. and the floats are also running off to the right, all the way to the right screen edge. also causes a horizontal scrollbar at many screen sizes. […] Giải pháp: đặt một chiều cao cho IE/win và không ảnh hưởng tới chiều cao hiển thị của container. Điều này là hoàn toàn có thể vì IE có một hoạt động không tiêu chuẩn khác liên quan đến box và kích cỡ.” Holly Hack: gán một chiều cao cho yếu tố, ví dụ như height: 1%;.

float-06.gif

    • The Win/IE6 Peekaboo bug : “Một box thay đổi có một float ở bên trong, và phần nội dung hiển thị dọc theo float đó. Trong IE6 phần nội dung bị biến mất. Khi bạn kéo xuống, hoặc có thể là chuyển qua một cửa sổ khác, nó sẽ quay lại (lỗi này đã được sửa trong IE7).

float-07.gif

    • “IE/Win đưa ra một lề phải 3px cho block float bên trái. Cho dù bạn làm gì, lề vẫn luôn ở đó. Để xem nó hoạt động, hãy xem lỗi float trước floating bug rồi sau đó là double float fix .” Lỗi này còn được gọi là The IE Three Pixel Text-Jog [Floating Bugs ].
    • IE Duplicate Character Bug : “Internet Explorer 6 has a puzzling bug involving multiple floated elements; text characters from the last of the floated elements are sometimes duplicated below the last float. The direct cause is nothing more than ordinary HTML comments, such as, , sandwiched between floats that come in sequence. Bugfix .

float-08.gif

       

 

      [

IE Duplicate Character Bug

       ]
    • “One of the most common tasks when laying out the content of a web page is floating images to the right or left so that text flows around them. The addition of the clear to the floated image ensures that each one will always sit below the previous one. However, placing the float and clear properties on the same element can cause large gaps to appear in Internet Explorer (IE) — gaps that take more complicated CSS to fix than what we’ve used so far. Bugfix .” [Close Gaps Next to Floated Images in Internet Explorer ]
    • “You place a left float into a container box, and use a left margin on the float to push it away from the left side of the container. In Internet Explorer the left float margin has been doubled in length!” [The IE Doubled Float-Margin Bug ]
    • “The bug demonstrated here causes in-line elements (images, text) adjacent to a floated div to appear to be indented from their expected location. The indentation is caused by IE/Win’s weird handling of margins on floated elements.” [Floats, Margins and IE ]
    • “There is a simple solution that fixes many of the IE float bugs. All floats become a block box; the standard says that the display property is to be ignored for floats, unless it’s specified as none. If we set display:inline for a floating element, some of the IE/Win bugs disappears as if by magic. IE/Win doesn’t make the element into an inline box, but many of the bugs are fixed.” [Float Layouts ]
    • “Using a combination of float and negative margins on an element makes any links in the element unclickable in Safari 1.3 and Safari 2.0. Text also becomes very difficult to select, and if you tab through the links they disappear when they lose focus. A workaround is to add position:relative to the CSS declaration for any floated elements with negative margins.” [Float + negative margin problems in Safari ]
    • “MSIE 7 now correctly implements the W3C specification by collapsing containers that include floated children. However, as it has not implemented generated content, the so called easy clearing method is not an option for clearing floats in MSIE 7. The overflow method is an appropriate solution for all versions of Internet Explorer:
    • 1. #content { overflow : hidden; _height : 1%; } 

 

      [

Xoá float mà không cần tới marlup cấu trúc trong IE7

     ]

Các bài hướng dẫn và kĩ thuật float CSS

float-09.gif

       

 

một layout trang giống như thế này

       , bằng cách sử dụng các chuẩn web và CSS. Một layout như thế này có thể dùng trong nhiều mục đích khác nhau, trong đó gallery ảnh là phổ biến nhất. Cái trang mà tôi liên kết tới đó vẫn chưa được hoàn thành, tôi đã cố để nó thật đơn giản để bạn có thể tập trung vào phần layout hình ảnh và chữ.
    • Tạo một trang web tốt hơn bằng cách hiểu các yếu tố float trong CSS
    • Bài viết này cung cấp một bản giới thiệu ngắn gọn về các yếu tố float, giải thích float CSS và các chỉ dẫn rõ ràng, đưa ra vài ví dụ làm thể nào để dùng chúng để đặt các yếu tố HTML trên trang web tốt hơn.

    • Tạo cột với float
    • Nhìn chung, hiện tại có hai cách để tạo layout nhiều cột trong CSS: đặt ở vị trí cố định hoặc cho trôi – float. Đa phần, float sẽ là lựa chọn của bạn. Trong bài hướng dẫn này, bạn sẽ học cách tạo cột bằng cách dùng float, và các giá trị độ rộng và lề.

    • Danh sách an toàn bên cạnh các yếu tố float bên trái Safe Lists Next to Left-Floated Elements
    • Có nhiều phương pháp khác nhau để định dạng các danh sách html chính xác. Nhưng liệu các phương pháp đó có đáng tin trong mọi trình duyệt và mọi hoàn cảnh? Trong bài viết này, chúng ta sẽ xem xét một trường hợp đơn giản: một danh sách với yếu tố để float bên trái cạnh nó.

    • Tạo các layout thay đổi với gờ negative và float
    • Tôi đã tận dụng cơ hội để thể hiện một khía cạnh chưa được tận dụng của CSS: các gờ negative. Các gờ negative cho phép chúng to đẩy phần nội dung ra xa các cạnh của trình duyệt, dành khoảng trống cho thanh nách.

    • Hình ảnh float nhưng không bị văn bản bao quanh

float-10.gif

       

 

      Đã bao nhiêu lần bạn có float một hình ảnh sang trái của phần nội dung, nhưng vẫn muốn giữ không cho phần nội dụng bao quanh hình ảnh?
    • Float hình ảnh sang phải

float-11.gif

       

 

float-12.gif

       

 

float-13.gif

       

 

float-14.gif

       

 

float-15.gif

       

 

float-16.gif

       

 

float-17.gif

       

 

      Float một scaleable drop cap sang trái, chỉnh lại kích cỡ và điều chỉnh độ cao đường cho phù hợp với yêu cầu.
    • Layout hai cột thay đổi
    • Float một điều hướng bên trái để có được một layout hai cột với đầu trang và cuối trang.

    • Layout ba cột thay đổi
    • Float các cột trái và phải để có được một layout 3 cột với đầu trang và cuối trang.

    • Hướng dẫn html CSS float
      Đây là lúc để nghĩ vượt ra khỏi box, hay chính xác hơn là float dọc theo box. Chúng ta đã đánh mất sự sáng tạo mã hoá CSS ở đâu? CSS giải phóng sự phụ thuộc vào các layout bảng truyền thống mà đôi khi vì quá phụ thuộc vào chúng nên chúng ta không suy xét tới các phương án thiết kế layout và trang thay thế khác. Thật là một điều đáng tiếc. Đã đến lúc vượt ra khỏi cái hộp!

 

http://123clicksite.com/vi/xu-huong/38-css/118-ly-thuyt-float-trong-css-nhng-iu-bn-nen-bit.html

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s