Clear và Float (video)
- August 29, 2009
- 31 comments
Clear và Float là một khái niệm rất quan trọng trong CSS và sử dụng rất nhiều trong thiết kế giao diện với CSS. Tôi đã có bài viết về Clear và Float, nhưng vì đây là một khái niệm quan trọng, do vậy tôi muốn làm một video tutorial để giải thích những khía cạnh khác của Clear và Float. Hy vọng qua video này, bạn sẽ hiểu thêm ra về clear và float
Thời lượng:19:44
Link Download file định dạng .avi chất lượng cao: MegaUpload, MediFire
File Size:63.13MB
Tut chữ về clear và float
Theo quan điểm cá nhân của tôi:
-Phần tử có float sẽ tách khỏi div.
->Phần dưới div sẽ chòi lên
-Để ngăn không cho chòi lên ta dùng clear, có thể ví nó như tấm ván đóng vào thẻ rồi dán cái lên; clear: both có nghĩa là khóa tất các góc.
-Cách thêm display:table vào thẻ div của hung cho kết quả tương tự.
Mình hỏi mình muốn kích vào menu left thì dữ liệu hiện ra phần right thì lệnh đấy là gì nhỉ . bạn giúp mình nhé ,thanks
anh ơi sao anh không dùng Adobe Dreamweaver viết code hả anh em thấy cái này viết code cực kỳ dễ hiểu phần mềm của anh cũng hay nhưng để cho người xem video thấy hiểu hơn thì em góp ý mình có thể thay đổi dùng Dremweaver để viết chẳng hạn khi nào người xem hiểu rồi có thể tập đánh code bằng phần mềm anh dùng
Bạn nào có thể giải thích thêm cho mình hiểu về cái clear:both không? Ngoài ra mình còn biết ngoài giá trị both còn có left, right.
Mail giúp mình nhé:toilaf9@gmail.com.
Cảm ơn bạn rất nhiều !
Anh cho em hỏi sự khác nhau của 2 mệnh đề trên trong CSS
img#wrapper {……} và
#wrapper img {….}
Thanks
welcome newbie. câu hỏi hay, giải thích như sau:
img#wrapper: xác định những thẻ img có id = wrapper
img.wrapper: xác định những thẻ img có class = wrapper
#wrapper img: xác định những thẻ img là con của thẻ có id là wrapper.
Thank anh nhiều lắm ,em đang đau đầu vì cái vụ thẻ div bị nhảy lung tung mà không biết chỉnh thế nào.
Cảm ơn anh!
bai viet rat hay.thanks
Thanks tác giả nhé! bài viết rất bổ ích
cho em xin email của anh hướng dẫn trong video,được không ah.em xin cảm ơn
Và một điều nữa khi áp dụng cách làm này và áp dụng cách dùng clear, khi ta sẽ thấy một hiện tượng như sau:
http://img685.imageshack.us/img685/2605/71201020111am.png
Trong CSS thì định nghĩa sau được ưu tiên hơn định nghĩa trước, ban đầu ta định nghĩa độ rộng của container là 500px; sau đó ta định nghĩa cho thẻ div trong primary là 400px –> thẻ div sau sẽ hiển thị đúng độ rộng của nó.
Chào anh DW, CK, em là lính mới tò te, mới biết izwebz một tuần nay. Và tối nào cũng cặm cụi download video về “ngâm cứu”. Sau khi xem tutorial này, em thấy rất hay, và cũng là vấn đề mà nhiều bạn gặp phải. Nhân đây, em xin được đóng góp 1 giải pháp thứ 3, không biết là giải pháp này có good không, mong các bác admin và các bạn cho ý kiến nhận xét.
Chúng ta chỉ cần thêm một thuộc tính vào id=container trong css, cụ thể như sau:
#container: { display: table; }
em thấy kết quả cho được cũng giống như ta dùng
clear: { clear: both; } nhưng khác ở chỗ ta không cần phải thêm 1 thẻ trống trong html.
Giải thích cho hiện tượng này (theo quan điểm cá nhân) là:
display: table; tức là tạo một bảng bao quanh các phần tử bên trong. Ở đây là div#container là bảng lớn bao quanh các phần tử bên trong nó.
còn clear: both; là không có phần tử nào đứng cùng 1 hàng với phần tử được khai báo là clear: both; ở đây ta dùng thẻ . Tưởng tượng nó giống như một khối đặc chiếm dụng một không gian chạy từ lề bên trái sang lề bên phải Và CSS phải chấp nhận sự hiện diện của nó.
Và một điều nữa khi áp dụng cách làm này và áp dụng cách dùng clear, khi ta sẽ thấy một hiện tượng như sau:
thẻ div sau sẽ hiển thị đúng độ rộng của nó.
hi! video và bài viết đều rất hay và dễ hiểu. đúng là cái mà mình đang cần. Có một cái muốn hỏi bạn là cái tool để chỉnh HTML và CSS trong video bạn đang dùng tên là gì vậy? mình tìm mà ko thấy cái giống như thế..! thanks nhé
OH vậy àh, cảm ơn bạn nha, nhưng mình tưởng nếu mình có thêm div nữa mà muốn div này luôn nằm dưới div_1, div_2 thì không cần clear:both chứ, hóa ra vẫn cần clear both àh. ??? Mình nghĩ div_2 nằm bên tay phải rồi thì sẽ làm tràn ( đầy ) dòng đấy chứ ???
@nothing1306: không cần phải clear: both đâu bạn, khi nào bạn có thêm div nữa mà muốn div này luôn nằm dưới div_1 và div_2 thì bạn mới cần clear: both
Làm video thì cũng tuyệt nhỉ, dễ hiểu, nhưng bị lỗi thì không biết sửa làm sao, ví dụ như h1 /h2
Anh cho em hỏi:
Em có 2 thẻ div, div_1 float bên trái, div_2 float bên phải thì có cần phải dùng tới clear:both; không vậy anh?
P/s:
Bác Demon Warlock ah, link video này của bác die rùi. Bác có thể up lại giùm e được ko, e rất cần. Thank bác nhìu!!!
cám ơn anh nhiều nha! em đã tìm ra lỗi của nó rùi anh à.mất cả ngày trời của em lun đó.nhưng em thích trang web này vì nơi đây mọi thắc mắc đều được quan tâm giải đáp.
chào các anh!
clackken.smith@gmail.com . bạn gửi đây cho mình đi
Bạn phải có demo chứ , nói không khó hiểu lắm .
Mà menu gì mà lại lắm ul đến vậy
anh ơi!em mún gửi cho anh cài hình để anh nhìn cho dễ hiểu.Anh có thể cho em d/c mail của anh ko?
anh ơi!cho em hỏi một chút nha: em đang thiết kế website bằng thẻ div.
Em thiết kế menu bên trái và cho float:left. Sau đó:trong menu trái em làm các thẻ ul để hiển thị các menu.Mặc dù em đã cho độ rộng của ul=của menu trái nhưng khi em chạy thì tát cả những thẻ ul nó ko nằm hết độ rộng của menu trái mà lại chừa ra một khoảng trống bên phải.Em đã cố sửa rất lâu nhưng mà ko được.
Anh giúp em với nha anh!em đang cần làm bài gấp!
Cảm ơn anh nhiều!
Cảm ơn các anh
Thanks, cái lỗi này gặp hoài mà không hiểu tại sao, bây giờ thì “Thằng Đậu đã hiểu”
Thanks bạn nhé. Video hay lắm. Mình cũng làm nhiều CSS nhưng thấy rất bổ ích
Ok, Tôi hiểu rồi.
Rất ít khi người ta set margin cho thẻ `
__abENT__lt;body__abENT__gt;`. Bạn nên tạo các thẻ `__abENT__lt;div__abENT__gt;` và set margin cho nó. Bạn có thể xem thêm các video về tạo giao diện để hiểu rõ hơn.nó vẫn thế. không được bạn à
Nếu bạn áp dụng vào thẻ nào thì thẻ đó phải có tác dụng. Có thể 5px nó nhỏ quá bạn không thấy chăng? thử với 500px xem sao, nó dịch sang phải liền à!!!
với firefox thì code không có tác dụng
body{margin-right:5px}
??????????????????