CSS

Bộ chọn CSS (selectors)

Bộ chọn (selectors) được dùng để chọn các thành phần muốn định dạng css.

Bộ chọnVí dụMô tả
* * Chọn tất cả các thành phần html.
tag p Chọn tất cả các thành phần cùng loại.
tag01 tag02 div p Chọn tất cả thành phần <tag02> bên trong thành phần <tag01>.
tag01,tag02 div,p Chọn tất cả thành phần <tag01> và <tag02>.
tag01+tag02 div+p Chọn tất cả thành phần <tag02> được đặt kế và sau thành phần <tag01>.
tag01>tag02 div>p Chọn tất cả thành phần <tag02> có thành phần cha là <tag01>.
.class .className Chọn tất cả các thành phần có cùng tên class.
#id #idName Chọn tất cả các thành phần có cùng tên id.
:active a:active Chọn các liên kết được kích hoạt.
:after p:after Thêm nội dung ngay phía sau thành phần.
:before p:before Thêm nội dung ngay phía trước thành phần.
:first-child p:first-child Chọn thành phần đầu tiên của thành phần cha chứa nó.
:first-letter p:first-letter Chọn ký tự đầu tiên của một thành phần.
:first-line p:first-line Chọn dòng đầu tiên của một thành phần.
:focus input:focus Thành phần sẽ focus khi được chọn.
:hover a:hover Chọn các liên kết được hover (di chuyển chuột lên thành phần).
:lang(mã ngôn ngữ) p:lang(vi) Chọn thành phần với thuộc tính ngôn ngữ có giá trị bắt đầu với "mã ngôn ngữ".
:link a:link Định dạng cho tất cả liên kết khi chưa được click.
:visited a:visited Định dạng cho các thành phần đã được click.
[Thuộc tính] [target] Chọn tất cả các thành phần có cùng thuộc tính (attribute).
[Thuộc tính|=ngôn ngữ] [lang|=vi] Được sử dụng để chọn tất cả các thành phần với thuộc tính có giá trị = "ngôn ngữ".
[Thuộc tính~=giá trị] [title~=myWeb] Chọn tất cả các thành phần với thuộc tính chứa một giá trị.
[Thuộc tính=giá trị] [target=_blank] Chọn tất cả các thành phần với thuộc tính bằng giá trị.

 

Thuộc tính CSS

Thuộc tínhVí dụMô tả
background background: #ff0000; Định dạng nền (background) cho thành phần.
border border: 1px solid #ff0000; Định dạng đường viền cho thành phần.
border-collapse border-collapse: collapse; Thuộc tính border-collapse xác định đường viền củatable có tách biệt ra hay không.
border-spacing border-spacing: 10px; Xác định khoảng cách giữa các đường viền của các cột lân cận.
bottom bottom: 10px; Xác định vị trí dưới cùng của thành phần được định vị trí.
caption-side caption-side: bottom; Xác định vị trí một chú thích của table.
clear clear: both; Xác định 2 bên của phần tử (left, right), nơi mà phần tử float không được cho phép.
clip clip: rect(0,0,50px,10px); Xác định đoạn cho thành phần khi sử dụng thuộc tính position có giá trị "absolute".
color color: #ff0000; Xác định màu sắc cho text.
content content: "." Sử dụng kèm với bộ chọn ":before", ":after" để chèn nội dung được tạo.
counter-increment counter-increment: section; Gia tăng một hoặc nhiều counter (sắp xếp có thứ tự, có hiển thị số)
counter-reset counter-reset: subsection; Tạo hoặc reset một hoặc nhiều counter.
cursor cursor: pointer; Xác định kiểu con trỏ chuột được hiển thị.
direction direction: ltr; Xác định hướng cho văn bản.
display display: inline; Xác định loại hiển thị của thành phần.
empty-cells empty-cells: hide; Xác định có hay không có đường viền và nền trong một cột rỗng của table
float float: left; Xác định có hay không một thành phần được float.
font font: 12px arial,sans-serif; Thiết lập font cho thành phần, bao gồm font chữ, độ rộng, ...
height height: 50px; Thiết lập chiều cao của thành phần.
left left: 10px; Xác định vị trí bên trái của thành phần định vị trí (như position)
letter-spacing letter-spacing: 2px; Tăng hoặc giảm khoảng cách giữa các ký tự trong đoạn text.
line-height line-height: 1.5; Thiết lập chiều cao giữa các dòng.
list-style list-style: decimal; Thiết lập tất cả thuộc tính cho một danh sách trong một khai báo.
margin margin: 15px; Thiết lập các thuộc tính margin trong một khai báo.
max-height max-height: 200px; Thiết lập chiều cao tối đa của thành phần.
max-width max-width: 900px; Thiết lập chiều rộng tối đa của thành phần.
min-height min-height: 100px; Thiết lập chiều cao tối thiểu của thành phần.
min-width min-width: 600px; Thiết lập chiều rộng tối thiểu của thành phần.
outline outline: dotted; Định dạng các đường viền bao ngoài
overflow overflow: scroll; Xác định điều gì sẽ xảy ra nếu một thành phần box tràn nội dung.
padding padding: 15px; Thiết lập các thuộc tính padding trong một khai báo.
page-break-after page-break-after: alway; Xác định các phân chia văn bản ngay sau thành phần.
page-break-before page-break-before: alway; Xác định các phân chia văn bản ngay trước thành phần.
page-break-inside page-break-inside: alway; Xác định các phân chia văn bản ngay bên trong thành phần.
position position: absolute; Xác định loại của phương pháp định vị trí cho thành phần.
quotes "‘" "’" Thiết lập các loại dấu ngoặc bao ngoài khi nhúng một trích dẫn.
right right: 10px; Xác định vị trí bên phải của thành phần định vị trí (như position)
table-layout table-layout: fixed; Thiết lập các thuật toán layout được sử dụng cho table.
text-align text-align: center; Sắp xếp các nội dung theo chiều ngang.
text-decoration text-decoration: underline; Xác định các trang trí thêm cho text.
text-indent text-indent: 10px; Ghi rõ thụt đầu dòng của dòng đầu tiên trong một khối văn bản.
text-transform text-transform: uppercase; Thiết lập các ký tự viết hoa cho văn bản.
top top: 10px; Xác định vị trí bên trên của thành phần định vị trí (như position)
vertical-align vertical-align: middle; Sắp xếp các nội dung theo chiều dọc.
visibility visibility: visible; Xác định thành phần có được nhìn thấy hay không.
white-space white-space: nowrap; Xác định khoảng trắng có bên trong thành phần được xử lý như thế nào.
width width: 800px; Thiết lập chiều rộng của thành Thành phần
word-spacing word-spacing: 5px; Tăng hoặc giảm không gian giữa các từ trong đoạn văn bản.
z-index z-index: 100; Thiết lập thứ tự xếp chồng nhau của một thành phần vị trí.

CSS3

Bộ chọn CSS (selectors)

Ngoài những bộ chọn (selectors) của CSS1 và CSS2, ở CSS3 còn có thêm những bộ chọn sau:

Bộ chọnVí dụMô tả
tag01~tag02 ul~p Chọn tất cả thành phần 02 khi có thành phần 01 ở trước.
[attribute^=value] img[src^="bnr_"] Chọn tất cả thành phần với thuộc tính có giá trị bắt đầu bằng "value".
[attribute$=value] img[src$=".gif"] Chọn tất cả thành phần với thuộc tính có giá trị kết thúc bằng "value".
[attribute*=value] img[src*=""] Chọn tất cả thành phần với thuộc tính có giá trị đặc biệt bằng "value".
:first-of-type p:first-of-type Chọn thành phần con đầu tiên hoặc duy nhất trong các thành phần cha.
:last-of-type p:last-of-type Chọn thành phần con cuối cùng hoặc duy nhất trong các thành phần cha.
:only-of-type p:only-of-type Chọn thành phần con trong các thành phần cha, khi thành phần cha có một thành phần con là chính nó.
Trong thành phần cha có thể chứa nhiều thành phần con, tuy nhiên thành phần con được chọn phải là duy nhất, không được có từ 2 trở lên.
:only-child p:only-child Chọn thành phần con trong các thành phần cha, khi thành phần cha có mỗi thành phần con là chính nó, không được chứa thành phần con khác.
Chỉ chọn thành phần có thành phần cha, những thành phần độc lập sẽ không được chọn.
:nth-child(n) p:nth-child(3) Chọn thành phần thứ "n" trong thành phần cha.
Chỉ chọn thành phần có thành phần cha, những thành phần độc lập sẽ không được chọn.
:nth-last-child(n) p:nth-last-child(3) Chọn thành phần thứ "n" tính từ thành phần cuối trong thành phần cha.
Chỉ chọn thành phần có thành phần cha, những thành phần độc lập sẽ không được chọn.
:nth-of-type(n) p:nth-of-type(3) Chọn thành phần thứ "n".
:nth-last-of-type(n) p:nth-last-of-type(3) Chọn thành phần thứ "n" từ thành phần cuối trong thành phần cha.
:last-child p:last-child Chọn thành phần cuối cùng trong thành phần cha.
Chỉ chọn thành phần có thành phần cha, những thành phần độc lập sẽ không được chọn.
:root :root Chọn thành phần gốc của văn bản.
:empty p:empty Chọn thành phần không chứa thành phần khác.
:target #event:target Sử dụng trong liên kết anchor name (link neo).
:enabled input:enabled Chọn thành phần được kích hoạt (enabled), thường sử dụng cho các thành phần của form.
:disabled input:disabled Chọn thành phần bị vô hiệu hóa (disabled), thường sử dụng cho các thành phần của form.
:checked input:checked Chọn thành phần được check (checked), thường sử dụng cho các thành phần của form.
:not(bộ chọn) :not(p) Chọn tất cả ngoại trừ bộ chọn trong ngoặc.
::selection ::selection Chọn phần tử được người dùng chọn.

 

Thuộc tính CSS



Ngoài những thuộc tính của CSS1 và CSS2, ở CSS3 còn có thêm những thuộc tính sau:

Thuộc tínhMô tả
animation Xác định một chuyển động của một thành phần.
appearance Định dạng cho thành phần trông như giao diện chuẩn gần với người dùng.
backface-visibility Xác định bề mặt sau của thành phần khi thực hiện một chuyển động xoay.
background-clip Xác định vùng backgroud được cắt bớt theo vùng được giới hạn.
background-origin Xác định giá trị tương đối của background giới hạn theo vùng giới hạn.
background-size Xác định lại chiều rộng và chiều cao cho background.
background gradient Tạo màu sắc cho background theo biên độ giảm dần.
Nhiều background Sử dụng để khai báo nhiều dạng background khác nhau trong cùng một tag.
border-image Dùng để định dạng các dạng border bằng hình ảnh.
border-radius Dùng để định dạng các dạng bo góc của border.
box-align Xác định vị trí cho thành phần theo chiều dọc hoặc theo chiều thẳng đứng.
box-direction Xác định hướng cho thành phần.
box-flex Xác định sự ưu tiên linh hoạt theo các thành phần khác.
box-ordinal-group Cho biết thứ tự ưu tiên của các thành phần.
box-orient Xác định thành phần dọc theo phương hướng khối hoặc theo trục.
box-pack Định vị trí của thành phần theo mép rìa của thành phần.
box-sizing Xác định lại chiều rộng và chiều cao của thành phần.
box-shadow Định dạng bóng cho thành phần.
column Dùng để chia nội dung thành phần thành nhiều cột khác nhau.
@font-face Định dạng các dạng font chữ khác nhau theo các dạng font riêng.
font-size-adjust Dùng để định dạng điều chỉnh cho font chữ, độ lớn của chữ được thể hiện bởi phép nhân.
@keyframes Dùng để điều khiển diễn biến một hoạt động của thành phần, được dùng kèm với thuộc tính animation.
nav Di chuyển qua lại giữa các thành phần điều hướng (navigate) bằng cách di chuyển các phím mũi tên.
opacity Hiển thị cấp độ trong suốt cho thành phần.
perspective Cho ta thấy được chiều sâu của thành phần trong khai báo 3D.
perspective-origin Định nghĩa trục quay cho thành phần có sử dụng perspective.
resize Định dạng cho vùng nội dung mà người dùng có thể thay đổi được kích thước.
text-justify Tăng hoặc giảm khoảng cách giữa các từ và giữa các ký tự sao cho dàn đều thành phần.
text-overflow Xác định vùng text được cắt bớt.
text-shadow Xác định bóng đỗ cho text.
transform Xác định một chuyển đổi 2 chiều, 3 chiều, có thể là xoay, tỷ lệ, di chuyển, nghiêng, ...
transform-origin Xác định trục cho một chuyển đổi 2 chiều, 3 chiều.
transform-style Các thành phần bên trong sẽ giữ vị trí 3D của nó.
transition Xác định một quá trình chuyển đổi khi có một hành động.
word-break Sẽ làm cho những chữ trong một từ không còn là một thể thống nhất, nghĩa là có thể xuống hàng bất cứ vị trí nào trong từ.
word-wrap Sẽ làm cho những từ dài xuống hàng mà không làm vỡ layout.
THUỘC TÍNH CHƯA ĐƯỢC HỖ TRỢ BỞI TRÌNH DUYỆT
grid-columns Xác định chiều rộng cho các cột trong định dạng lưới.
grid-rows Xác định chiều rộng cho các hàng trong dạng lưới.
hanging-punctuation Xác định một dấu chấm câu có thể đặt ở đầu hoặc ở cuối của một dòng văn bản.
icon  
punctuation-trim Xác định một ký tự dấu chấm câu nên được cắt nếu nó xuất hiện ở đầu hoặc cuối của một dòng, hoặc tiếp giáp với một ký tự dấu chấm câu đầy đủ chiều rộng khác.
rotation Xoay một thành phần theo một điểm.
target Xác định cách thức mở ra một liên kết như: tab, popup, ...
text-outline Xác định dạng vùng biên cho text.
text-wrap Định dạng dòng text có bị ngắt đoạn hay không.

Pseudo Class

Pseudo (phát âm là: sju:dou) tiếng Việt có nghĩa là “giả, không thật”, sở dĩ nó được đặt tên là Pseudo Class hay gọi là “Class giả” là vì nó không được gắn liền với những thẻ XHTML như những class thông thường bạn đã biết ở bài trước. Một thành phần rất quan trọng trong mọi website chính là liên kết. Cũng như một đối tượng văn bản thông thường, chúng ta hoàn toàn có thể áp dụng các thuộc tính định dạng đã học ở 2 bài trước như định font chữ, gạch chân, màu chữ,… cho một liên kết. Hơn nữa, CSS còn cung cấp một điều khiển đặc biệt được gọi là pseudo- classes. Pseudo-classes cho phép bạn xác định các hiệu ứng định dạng cho một đối tượng liên kết ở một trạng thái xác định như khi liên kết chưa được thăm (a:link), khi rê chuột lên liên kết (a:hover), khi liên kết được thăm (a:visited) hay khi liên kết đang được kích hoạt – đang giữ nhấn chuột (a:active). Với điều khiển pseudo- classes cùng với các thuộc tính CSS đã học chắc chắn sẽ mang lại rất nhiều ý tưởng về trang trí liên kết cho trang web.

Pseudo Class cho đường liên kết

Pseudo Class được sử dụng nhiều nhất với các đường liên kết (thẻ <a>) để tạo ra hiệu ứng thay đổi trạng thái chữ mỗi khi người dùng di chuột qua nó ví dụ như những đường liên kết trên izwebz, khi bạn di chuột qua sẽ có màu nền là màu xanh nhạt.

Có tất cả 4 trạng thái của đường liên kết

  • Link: đơn thuần là đường liên kết để báo cho người đọc biết nó là đường liên kết.
  • Visited: Người đọc đã từng nhấp chuột vào link này rồi.
  • Hover: Người đọc di chuột qua đường liên kết
  • Active: Đường liên kết đang được người đọc nhấp chuột.

Tương đương với 4 Pseudo Class.

  • a:link {color:blue;}
  • a:visited {color:gray;}
  • a:hover {color:red; text-decoration:none;}
  • a:active {color:navy;}

Bây giờ hãy tạm gác chuyện màu nào hay hiệu ứng nào thì thích hợp cho đường liên kết lại, chúng ta hãy xem đoạn code trên ảnh hưởng tới đường liên kết như thế nào. Đoạn code trên định nghĩa đường liên kết lúc:

  • Bình thường sẽ có màu xanh và gạch chân là giá trị mặc định.
  • Đường liên kết đã được người dùng nhấp vào, nó sẽ có màu xám.
  • Người dùng di chuột lên (chưa nhấp) nó sẽ có màu đỏ và không có gạch chân
  • Người dùng chỉ nhấp và giữ chuột nó sẽ có màu xanh đậm (ít khi xảy ra)

Trên đây chỉ là những hiệu ứng cơ bản nhất của Pseudo Class cho đường liên kết. Sau này bạn có thể sử dụng Pseudo Class như là 1 dạng Contextual Selector để hướng tới những đối tượng cụ thể và tạo ra những hiệu ứng khác nhau cho các đường link ở những phần khác nhau như thanh di chuyển, footer, liên kết bạn bè …

Trong 4 trạng thái trên thì bạn không nhất thiết phải khai báo cả 4 trạng thái. Thường thì người ta chỉ khai báo 2 trạng thái chủ yếu là :link và :hover. Còn :visited và :active thì cũng không thực sự cần thiết lắm. Trình duyệt sẽ bỏ qua những trạng thái không được khai báo.

Lưu ý: Tuy nhiên để có hiệu ứng Rollover, bạn phải khai báo :hover sau :link hoặc :visited. Hoặc bạn có thể nhớ theo kiểu LoVe Hate

Pseudo Class còn có thể được áp dụng cho bất cứ thành phần nào để tạo hiệu ứng Rollover chứ không chỉ với các đường liên kết. Ví dụ

h1:hover {background-color:green;}

Lưu ý: IE6 không hỗ trợ Pseudo Class ở những thành phần khác ngoại trừ đường liên kết. IE7 có hỗ trợ Pseudo Class nhưng bạn phải khai báo là Strict DOCTYPE thì nó mới hoạt động.

First Child

x:first-child

Tính năng này dùng để hướng đối tượng là con “trưởng” của một thành phần “đông con”, nơi x là con đầu

Ví dụ:

.vi_du em:first-child {color:red;}

với code xhtml như sau

Tính năng này chủ yếu dùng để hướng đối tượng

Ở đoạn code trên thì hai thẻ <em> đều là con của thẻ <p> nhưng thẻ <em> đứng trước là con đầu, cho nên nó bị ảnh hưởng bới luật trên và kết quả bạn sẽ có

Tính năng này chủ yếu dùng để hướng đối tượng

Pseudo Elements

Pseudo Elements cho phép bạn tạo ra những hiệu ứng đặc biệt mà bạn không cần phải thêm markup vào code.

x:first-letter ở đó x là tên thẻ bị ảnh hưởng

p:first-letter {font-size:300%;}

Với markup tương ứng

<p>Trên đây chỉ là những hiệu ứng cơ bản nhất của Pseudo Class cho đường liên kết.</p>

x:first-line <– nơi x là tên thẻ bị ảnh hưởng

p:first-line {font-variation:small-caps;}

Cái hay của dòng code này là nếu cửa sổ trình duyệt lơn thì bất cứ chữ nào nằm vừa dòng đầu tiên sẽ bị IN HOA như hình trên. Nếu cửa sổ bé hơn, nó sẽ đẩy chữ xuống dưới và những chữ còn lại vẫn sẽ được IN HOA.

Clear và Float

 

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

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.

 {margin-left: 150px;background: #faf3c7;}
img {float: left;}

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.

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></div><!-- Thẻ div trống với-->

<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

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

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.