Float: Xác định Sự Trôi Nổi Của Thành Phần | Hướng Dẫn Học

Trang chủ » Float Left Nghĩa Là Gì » Float: Xác định Sự Trôi Nổi Của Thành Phần | Hướng Dẫn Học

Có thể bạn quan tâm

float
  • Trang chủ
  • Hướng dẫn học
  • Hướng dẫn học CSS
  • float

float

  • Nếu bài học này khó hiểu cho bạn, bạn có thể xem ví dụ về thuộc tính float để nắm được cách sử dụng.
  • Trước khi học nội dung về thuộc tính float, bạn hãy xem trước vùng không gian của HTML để hiểu rõ hơn cách sắp xếp không gian trong một trang HTML, nếu chưa hiểu vùng không gian HTML thì bạn sẽ rất khó hình dung được nội dung bài học.

Định nghĩa

Thuộc tính float: xác định sự trôi nổi của thành phần.

Nếu chỉ định nghĩa thuộc tính float đơn giản như vậy chắc chắn chúng ta sẽ không thể nào hiểu được thuộc tính này, chúng ta hãy xem trước các giá trị của float để xem thuộc tính float tác động lên thành phần như thế nào, rồi sau đó chúng ta sẽ rút ra định nghĩa về float, hãy kiên nhẫn từng bước:

  • float: left
  • float: right
  • float: none
  • Định nghĩa float

Chuẩn bị

Tạo file HTML và CSS có cấu trúc thư mục và nội dung như sau:

Cấu trúc thư mục

  • Html

    • index.html

    • css

      • style.css

Click vào dấu [+] để xem cấu trúc.

HTML viết

<!DOCTYPE html> <html lang="vi"> <head> <meta charset="utf-8" /> <title>Tiêu đề trang web</title> <link href="css/style.css" rel="stylesheet" media="screen,print" /> </head> <body> <div> <p class="first">Thành phần A.</p> <p class="second">Thành phần B.</p> </div> </body> </html>

Hiển thị trình duyệt khi chưa có CSS

Thành phần A.

Thành phần B.

CSS

Để dễ hình dung thuộc tính float, ta sẽ cho thành phần <div> và 2 thành phần <p> có nội dung như sau:

* { margin: 0; padding: 0; } div { border: 1px solid red; } p.first { background: #f3f3cf; height: 100px; } p.second { background: #e0e0fc; height: 100px; }

Hiển thị trình duyệt khi chưa sử dụng float

Thành phần A.

Thành phần B.

Download phần chuẩn bị

Tới đây ta đã xong bước chuẩn bị, bắt đầu khám phá thôi.

float: left

Trước khi định nghĩa về float: left, ta hãy xem ví dụ sau đây:

Ta thêm nội dung float: left cho thành phần A:

* { margin: 0; padding: 0; } div { border: 1px solid red; } p.first { background: #f3f3cf; float: left; height: 100px; } p.second { background: #e0e0fc; height: 100px; }

Hiển thị trình duyệt khi sử dụng float cho thành phần A

Thành phần A.

Thành phần B.

Kết quả cho thấy: background của thành phần A hiện chỉ còn phần chứa text và chiều cao của nó, còn thành phần B đã không còn nằm vị trí ban đầu, để giải thích cho điều này, ta hãy tạm thời xóa màu background của thành phần A:

CSS viết:

* { margin: 0; padding: 0; } div { border: 1px solid red; } p.first { background: #f3f3cf; float: left; height: 100px; } p.second { background: #e0e0fc; height: 100px; }

Hiển thị trình duyệt khi đã tắt background cho thành phần A

Thành phần A.

Thành phần B.

Phân tích:

float

  • Nhìn vào kết quả ta thấy màu background và vùng không gian của thành phần B đã chiếm vùng không gian của thành phần A, kết quả này là do khi sử dụng thuộc tính float, thành phần nào sử dụng float sẽ được giải phóng vùng không gian ban đầu, khu vực này sẽ trở thành vùng trống, và sẽ bị vùng không gian của những thành phần khác lập tức chiếm lấy.
  • Vậy tại sao thành phần B lại không nằm vị trí của thành phần A hay vị trí như ban đầu? các bạn hãy tưởng tượng có 2 tấm gỗ trôi trên mặt nước, không cần biết bên dưới mặt nước chuyển động như thế nào, 2 tấm gỗ vẫn không thể chồng chập lên nhau, cũng như vậy, thành phần B không thể nào chồng chập lên thành phần A được và vị trí của nó sẽ là vị trí của vùng trống mới ngay bên cạnh thành phần A, khi này thẻ <div> sẽ bao trọn vùng không gian của thành phần B, đây cũng là một đặt trưng của thuộc tính float.

Ta hãy thêm chiều rộng bằng 100px vào cả 2 thành phần để xem điều gì xảy ra tiếp theo, đồng thời ta cũng trả lại màu background cho thành phần A:

* { margin: 0; padding: 0; } div { border: 1px solid red; } p.first { background: #f3f3cf; float: left; height: 100px; width: 100px; } p.second { background: #e0e0fc; height: 100px; width: 100px; }

Hiển thị trình duyệt khi đã phục hồi background cho thành phần A và sử dụng width: 100px cho cả 2 thành phần A và B

Thành phần A.

Thành phần B.

Điều gì đã xảy ra với thành phần B?, màu background của thành phần B đâu mất? và tại sao thành phần B lại thoát khỏi thẻ div bao ngoài?, để giải thích câu hỏi này, ta lại tạm thời xóa màu background của thành phần A:

* { margin: 0; padding: 0; } div { border: 1px solid red; } p.first { background: #f3f3cf; float: left; height: 100px; width: 100px; } p.second { background: #e0e0fc; height: 100px; width: 100px; }

Trình duyệt hiển thị

Thành phần A.

Thành phần B.

Phân tích:

float

Sau khi vùng không gian của thành phần A được giải phóng, lập tức vùng không gian và vùng hiển thị của thành phần B chiếm chỗ, tuy nhiên thành phần B không thể nào chồng chập lên thành phần A (đã giải thích ở trên), và do vùng hiển thị hiện chỉ đủ chứa thành phần A, không đủ chỗ cho thành phần B nên thành phần B vẫn nằm ở vị trí như lúc đầu, nếu ta tăng chiều rộng sao cho đủ chỗ để chứa thành phần B thì thành phần B sẽ trôi lên ngang hàng với thành phần A:

* { margin: 0; padding: 0; } div { border: 1px solid red; } p.first { background: #f3f3cf; float: left; height: 100px; width: 100px; } p.second { background: #e0e0fc; height: 100px; width: 150px; }

Trình duyệt hiển thị

Thành phần A.

Thành phần B.

Ta hãy thử giải phóng vùng không gian của thành phần B bằng cách sử dụng thuộc tính float: left cho "p.second" đồng thời ta cũng trả lại màu background cho thành phần A:

* { margin: 0; padding: 0; } div { border: 1px solid red; } p.first { background: #f3f3cf; float: left; height: 100px; } p.second { background: #e0e0fc; float: left; height: 150px; }

Hiển thị trình duyệt khi đã phục hồi background cho thành phần A và sử dụng float: left cho thành phần B

Thành phần A.

Thành phần B.

Các bạn thấy: do vùng không gian của thành phần A và thành phần B đã được giải phóng, nên bên trong thẻ <div> đã không còn chứa vùng không gian nào (ngoài vùng không gian của thẻ <div>) cho nên trình duyệt hiển thị như chúng ta thấy.

Tới lúc này chắc các bạn đã nắm được phần nào về khái niệm float, tuy vậy chúng ta khoang vội định nghĩa về float là gì, chúng ta hãy tiếp tục xem thành phần A và thành phần B sẽ đối xử như thế nào khi sử dụng thuộc tính float: right

float: right

Sử dụng những thuộc tính CSS như trên, tuy nhiên ta sẽ sử dụng float: left cho thành phần A và float: right cho thành phần B

CSS viết như sau:

* { margin: 0; padding: 0; } div { border: 1px solid red; } p.first { background: #f3f3cf; float: left; height: 100px; } p.second { background: #e0e0fc; float: right; height: 100px; }

Trình duyệt hiển thị:

Thành phần A.

Thành phần B.

Nhìn vào kết quả ta thấy: vùng không gian của thành phần A và thành phần B đều được giải phóng, khác kết quả trên, lần này thành phần B trôi về bên phải.

float: none

float: none là trả về giá trị float như bình thường, coi như thành phần chưa sử dụng float, thường được sử dụng để phục hồi giá trị float cho thành phần.

Định nghĩa về float

Từ những ví dụ về float: left và float: right ta có thể rút ra kết luận về thuộc tính float như sau:

  • Thành phần nào sử dụng float sẽ được giải phóng vùng không gian, vùng không gian này sẽ trở thành vùng trống, và sẽ bị vùng không gian của những thành phần liền kề nó lập tức chiếm lấy.
  • Khi sử dụng float, các thành phần không chồng chập lên nhau, mà sẽ sắp xếp vị trí tùy thuộc vào chiều rộng của vùng trống.
  • Khi sử dụng float: left, vùng không gian của thành phần sẽ được giải phóng và thành phần sẽ trôi sang trái.
  • Khi sử dụng float: right, vùng không gian của thành phần sẽ được giải phóng và thành phần sẽ trôi sang phải.

Xem thêm ví dụ

margin

clear

Học web chuẩn

HƯỚNG DẪN HỌC

Hướng dẫn học CSS

  • Hướng dẫn học CSS
  • Giới thiệu về CSS
  • Sử dụng CSS

  • Các thuộc tính định dạng cho text

    • color
    • font-family
    • font-size
    • font-style
    • letter-spacing
    • line-height
    • text-decoration
    • word-spacing

  • Các thuộc tính định dạng chung

    • background
    • border
    • height
    • width
    • text-align

  • Các thuộc tính điều khiển nội dung

    • padding
    • margin
    • float
    • clear
    • Thủ thuật clearfix
    • display
    • position
  • Xem thêm ví dụ về CSS
  • Bài tập CSS & CSS3 cơ bản
  • Bài tập CSS & CSS3 nâng cao

Hướng dẫn học XHTML & HTML5

Bài tập HTML & HTML5

Hướng dẫn học CSS

Hướng dẫn học CSS3

Bài tập CSS & CSS3

Hướng dẫn học SCSS

Hướng dẫn học Responsive

Hướng dẫn học jQuery

Bài tập jQuery

Hướng dẫn học ES6

Hướng dẫn học React.js

Hướng dẫn học Webpack

Hướng dẫn XAMPP

Hướng dẫn học PHP

Hướng dẫn học Laravel

Hướng dẫn học htaccess

THAM KHẢO

  • Tham khảo
  • Tham khảo HTML4/XHTML
  • Tham khảo HTML5
  • Tham khảo CSS
  • Tham khảo CSS3
  • Tham khảo jQuery

CHUYÊN ĐỀ

  • Chuyên đề
  • Chuyên đề HTML/CSS
  • Chuyên đề HTML5/CSS3
  • Chuyên đề jQuery/JS
  • jQuery/JS plugin

GÓP Ý - LIÊN HỆ

  • CÔNG CỤ TẠO CSS3CSS3 GENERATOR
  • BỘ CÔNG CỤGENERATOR TOOLS
  • CÔNG CỤ HỖ TRỢWEB TOOLS
  • CÔNG CỤ TẠO RANDOMRANDOM GENERATOR
  • CÔNG CỤ KIỂM TRA RESPONSIVE TEST
  • CHIA SẺ HAYWEB & TOOLS
  • Follow us on hocwebchuan.com
  • Short URL
  • Rabbie theme

Từ khóa » Float Left Nghĩa Là Gì