CSS - Tính chất Float: Hướng dẫn cho người mới bắt đầu
Xin chào các pháp sư CSS tương lai! Hôm nay, chúng ta sẽ lặn sâu vào thế giới kỳ diệu của tính chất float trong CSS. Đừng lo lắng nếu bạn chưa bao giờ viết một dòng mã trước đây - vào cuối bài hướng dẫn này, bạn sẽ浮动 các yếu tố như một chuyên gia!
Tính chất Float là gì?
Trước khi chúng ta nhảy vào phần sâu hơn, hãy bắt đầu từ những điều cơ bản. Tính chất float trong CSS giống như một枝 c魔法, cho phép các yếu tố浮动 đến bên trái hoặc bên phải của container của chúng. Hãy tưởng tượng bạn đang sắp xếp nội thất trong một căn phòng - tính chất float cho phép bạn đẩy các vật vào hai bên, tạo ra không gian cho các yếu tố khác 流动 xung quanh chúng.
Các giá trị có thể
Tính chất float có thể có nhiều giá trị, mỗi giá trị có sức mạnh đặc biệt của riêng nó:
| Giá trị | Mô tả |
|---|---|
| left | Floats the element to the left |
| right | Floats the element to the right |
| none | The element does not float (default) |
| inherit | Inherits the float value from its parent |
Áp dụng cho
Tính chất float có thể được áp dụng cho hầu hết các yếu tố HTML, nhưng nó thường được sử dụng với:
- Ảnh
- Divs
- Đoạn văn
- Tiêu đề
Cú pháp
Dưới đây là cú pháp cơ bản để sử dụng tính chất float:
selector {
float: value;
}Ví dụ:
img {
float: left;
}Điều này sẽ làm cho tất cả các ảnh trên trang web của bạn浮动 đến bên trái.
CSS Float - Cột có szerokość bằng nhau
Hãy bắt đầu với một ví dụ thực tế. Giả sử bạn đang tạo một trang web cho một tiệm bánh, và bạn muốn hiển thị ba loại bánh kẹp bên cạnh nhau. Dưới đây là cách bạn có thể sử dụng float để tạo ra các cột có szerokość bằng nhau:
<div class="pastry-container">
<div class="pastry">Croissants</div>
<div class="pastry">Éclairs</div>
<div class="pastry">Macarons</div>
</div>.pastry-container {
width: 100%;
}
.pastry {
float: left;
width: 33.33%;
padding: 15px;
box-sizing: border-box;
}Trong ví dụ này, chúng tôi đang浮动 mỗi div bánh kẹp sang bên trái và đặt szerokość của chúng là 33.33% (100% chia cho 3). box-sizing: border-box đảm bảo rằng padding được bao gồm trong phép toán szerokość.
CSS Float - Cột có chiều cao bằng nhau
Bây giờ, giả sử bạn muốn các cột này có chiều cao bằng nhau, bất kể nội dung. Chúng ta có thể sử dụng một chiêu nhỏ với padding và margin:
.pastry-container {
overflow: hidden;
}
.pastry {
float: left;
width: 33.33%;
padding-bottom: 500px;
margin-bottom: -500px;
}Điều này tạo ra ảo giác về các cột có chiều cao bằng nhau bằng cách thêm một padding-bottom lớn và một margin-bottom âm bằng nhau.
CSS Float - Ảnh bên cạnh nhau
Hãy thêm một số ảnh bánh kẹp hấp dẫn vào trang web của tiệm bánh:
<div class="image-container">
<img src="croissant.jpg" alt="Croissant">
<img src="eclair.jpg" alt="Éclair">
<img src="macaron.jpg" alt="Macaron">
</div>.image-container {
width: 100%;
}
.image-container img {
float: left;
width: 33.33%;
padding: 5px;
box-sizing: border-box;
}Điều này sẽ hiển thị các ảnh bánh kẹp bên cạnh nhau, mỗi ảnh chiếm một phần ba szerokość của container.
CSS Float - Flexible Boxes
Nhưng giả sử bạn muốn bố cục của mình linh hoạt hơn? Hãy đón chào flexbox, siêu anh hùng của các bố cục CSS hiện đại:
.pastry-container {
display: flex;
flex-wrap: wrap;
}
.pastry {
flex: 1 0 300px;
margin: 5px;
}Điều này tạo ra một bố cục linh hoạt nơi mỗi hộp bánh kẹp sẽ rộng ít nhất 300px và sẽ mở rộng để lấp đầy không gian khả dụng.
CSS Float - Menu Điều hướng
Floats thường được sử dụng để tạo menu điều hướng horizontals. Hãy tạo một menu cho tiệm bánh của chúng ta:
<nav>
<ul>
<li><a href="#home">Trang chủ</a></li>
<li><a href="#menu">Menu</a></li>
<li><a href="#about">Về chúng tôi</a></li>
<li><a href="#contact">Liên hệ</a></li>
</ul>
</nav>nav ul {
list-style-type: none;
padding: 0;
}
nav li {
float: left;
}
nav a {
display: block;
padding: 10px 20px;
text-decoration: none;
color: #333;
}Điều này tạo ra một menu điều hướng horizontals với mỗi mục浮动 sang bên trái.
CSS Float - Bố cục Web
Floats có thể được sử dụng để tạo ra bố cục web hoàn chỉnh. Dưới đây là một bố cục hai cột đơn giản:
<div class="container">
<header>Chào mừng đến với tiệm bánh của chúng tôi</header>
<nav>
<!-- Các mục điều hướng ở đây -->
</nav>
<main>
<article>Câu chuyện của chúng tôi</article>
<aside>Specιαl của ngày hôm nay</aside>
</main>
<footer>Liên hệ chúng tôi</footer>
</div>.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
header, nav, footer {
width: 100%;
clear: both;
}
main {
width: 100%;
}
article {
float: left;
width: 70%;
}
aside {
float: right;
width: 25%;
}Điều này tạo ra một bố cục với một khu vực nội dung chính và một cột bên.
CSS Float - Đoạn văn
Floats có thể được sử dụng để cuộn văn bản xung quanh ảnh:
<div class="content">
<img src="baker.jpg" alt="Our Master Baker" class="float-left">
<p>Meet our master baker, Chef Pierre. With over 30 years of experience...</p>
</div>.float-left {
float: left;
margin-right: 15px;
}Điều này sẽ làm cho văn bản cuộn xung quanh ảnh của đầu bếp chính chúng tôi.
CSS Float - Ảnh với Margin
Thêm margin vào ảnh浮动 có thể cải thiện khả năng đọc:
img {
float: left;
margin: 0 15px 15px 0;
}Điều này thêm một không gian xung quanh các ảnh浮动.
CSS Float - Không浮动
Đôi khi, bạn cần ngăn chặn một yếu tố浮动. Tính chất clear đến cứu giúp:
.no-float {
clear: both;
}Điều này đảm bảo rằng yếu tố với lớp no-float sẽ xuất hiện dưới bất kỳ yếu tố浮动 nào.
CSS Float -浮动 sang Trái hoặc Phải
Nhớ rằng bạn có thể浮动 các yếu tố sang bên trái hoặc bên phải:
.float-left {
float: left;
}
.float-right {
float: right;
}CSS Float - Ảnh Trùng lặp
Hãy cẩn thận! Các yếu tố浮动 có thể trùng lặp nếu không có đủ không gian. Bạn có thể ngăn chặn điều này bằng cách clearing đúng cách:
.clearfix::after {
content: "";
display: table;
clear: both;
}Thêm lớp này vào container của các yếu tố浮动 để ngăn chặn trùng lặp.
CSS Float - Ảnh Không Adjacent
Đôi khi, bạn muốn các ảnh浮动 giữ nguyên thứ tự:
img {
float: left;
clear: left;
}Điều này đảm bảo mỗi ảnh bắt đầu trên một dòng mới.
CSS Float -浮动 Dưới Các Tiền tố
Để làm cho các yếu tố浮动 dưới các tiền tố của chúng:
.float-below {
clear: both;
float: left;
}Điều này clears bất kỳ浮动 trước đó và sau đó floats the element.
CSS Float - Đến Dòng Mới
Để ép một yếu tố đến dòng mới sau các yếu tố浮动:
.new-line {
clear: both;
}CSS Float - Các Giá trị Liên quan
Dưới đây là bảng các thuộc tính và giá trị liên quan đến float:
| Thuộc tính | Giá trị |
|---|---|
| float | left, right, none, inherit |
| clear | left, right, both, none, inherit |
| overflow | visible, hidden, scroll, auto |
Và thế là bạn đã bước vào thế giới của CSS floats. Nhớ rằng, thực hành làm nên hoàn hảo, vì vậy đừng ngần ngại thử nghiệm với các kỹ thuật này. Trước khi bạn biết, bạn sẽ tạo ra những bố cục đẹp mắt, dựa trên floats, mà ngay cả những nhà thiết kế web có kinh nghiệm cũng phải ngưỡng mộ. Chúc bạn may mắn với mã của bạn!
Credits: Image by storyset