----
Thiết lập float cho
phần tử inline
Ở phần trên đã thực hiện float một hình ảnh, phần này sẽ thực
hiện float một phần tử inline chứa văn bản, ví dụ phần tử span. Mặc dù cả img và span đều là phần tử inline, nhưng chúng
cũng có những đặc điểm khác nhau.
[HTML]
<p><span class="info">Nhiệt độ trung bình
tháng ở Đà Lạt không bao giờ vượt quá 20°C, ngay cả trong những tháng nóng
nhất.</span>Thành phố Đà Lạt là tỉnh lỵ của tỉnh Lâm Đồng, nằm trên cao
nguyên Lâm Viên, thuộc vùng Tây Nguyên, Việt Nam. Từ xa xưa, vùng đất này vốn
là địa bàn cư trú của những cư dân người Lạch, người Chil và người Srê thuộc
dân tộc Cơ Ho. Cuối thế kỷ 19, khi tìm kiếm một địa điểm để xây dựng trạm nghỉ
dưỡng dành cho người Pháp ở Đông Dương, Toàn quyền Paul Doumer đã quyết định
chọn cao nguyên Lâm Viên theo đề nghị của bác sĩ Alexandre Yersin, người từng
thám hiểm tới nơi đây vào năm 1893</p>
[CSS]
span.info {
float: right;
margin: 10px;
width: 200px;
color: #fff;
background-color:
#9d080d;
padding: 4px;
}
p {
padding: 15px;
background-color:
#fff799;
border: 2px solid red;
}
Xem hình kết quả,
Một số lưu ý khi thực hiện float phần tử inline,
– Luôn thiết lập chiều rộng cho phần tử inline, như ở ví dụ
trên, phần tử span được thiết lập
width: 200px, nếu không thiết lập, chiều rộng của phần tử inline có thể rất rộng,
hoặc rất hẹp và kết quả là không thể kiểm soát được bố cục chung. Mặc dù phần tử
img là một phần tử inline, nhưng vì nó
được kế thừa thuộc tính width nên có
thể không cần thiết lập chiều rộng.
– Khi được float, phần tử inline sẽ được đối xử như một phần
tử block. Do vậy, ở ví dụ trên, vẫn thiết lập được margin top và bottom, mặc dù
theo đặc tả của một phần tử inline thì không thể thực hiện được việc này.
– Khi được float, margin top và bottom của hai phần tử cạnh
nhau (theo chiều dọc) không bị thu gọn (collapse).
Thiết lập float cho
phần tử block
Khi float phần tử block, cần để ý hai đặc điểm sau,
– Luôn thiết lập chiều rộng cho phần tử kiểu block, nếu không,
chiều rộng của phần tử sẽ ở chế độ auto,
và nó sẽ chiếm hết chiều rộng của cửa sổ trình duyệt hoặc phần tử chứa nó. Nếu
phần tử được float lại chiếm hết chiều rộng của phần tử chứa nó thì sẽ không
còn ý nghĩa gì nữa, vì mục đích của float là để văn bản bao bọc quanh phần tử,
chứ không phải nằm dưới phần tử.
– Khi một phần tử được float, nó sẽ trôi dạt về phía phải hoặc
phía trái một cách tương đối ngay tại vị trí của nó trong mã nguồn, và cho phép
các phần tử sau nó bao bọc xung quanh. Nghĩa là, nó sẽ nằm dưới các phần tử
block nằm trước nó trong mã nguồn. Như vậy, không thể float một phần tử lên hai
góc trên của trang web, trừ khi nó nằm ở đầu mã nguồn.
Ngắt ảnh hưởng của float
Để ngắt ảnh hưởng của chế độ float, nhằm đưa văn bản bao
quanh về chế độ hiển thị thông thường, sử dụng thuộc tính clear.
Khi gắn thuộc tính clear
vào phần tử nào thì phần tử đó sẽ không còn bị tác động bởi thuộc tính float đã
được thiết lập ở phía trên, nghĩa là, nó không nằm cạnh phần tử float, mà sẽ được
tách xuống một vùng mới, nằm dưới phần tử float.
Dưới đây là một số đặc tính của clear,
– Giá trị: left |
right | both | none | inherit
– Mặc định: none
– Áp dụng: phần tử kiểu
block
– Kế thừa: không
Lưu ý, thuộc tính clear
được gắn vào phần tử bên dưới, chứ không gắn vào chính phần tử float. Phần tử
nào có giá trị clear là left sẽ giúp
nó không còn bị ảnh hưởng bởi chế độ float:
left được thiết lập ở phía trên nó. Phần tử nào có giá trị clear là right sẽ giúp nó không còn bị ảnh hưởng
bởi chế độ float: right được thiết lập
ở phía trên nó. Nếu phía trên có nhiều phần tử được float (có thể cả left và
right), thì thiết lập giá trị cho clear là both
để đảm bảo chắc chắn không còn bị ảnh hưởng bởi chế độ float nữa.
Ví dụ,
[HTML]
<p><span class="info">Nhiệt độ trung bình
tháng ở Đà Lạt không bao giờ vượt quá 20°C, ngay cả trong những tháng nóng
nhất.</span>Thành phố Đà Lạt là tỉnh lỵ của tỉnh Lâm Đồng, nằm trên cao
nguyên Lâm Viên, thuộc vùng Tây Nguyên, Việt Nam. Từ xa xưa, vùng đất này vốn
là địa bàn cư trú của những cư dân người Lạch, người Chil và người Srê thuộc
dân tộc Cơ Ho. Cuối thế kỷ 19, khi tìm kiếm một địa điểm để xây dựng trạm nghỉ
dưỡng dành cho người Pháp ở Đông Dương, Toàn quyền Paul Doumer đã quyết định
chọn cao nguyên Lâm Viên theo đề nghị của bác sĩ Alexandre Yersin, người từng
thám hiểm tới nơi đây vào năm 1893</p>
<h1>Thông tin về Đà lạt</h1>
[CSS]
span.info {
float: left;
margin: 10px;
width: 200px;
height: 300px;
color: #fff;
background-color:
#9d080d;
padding: 4px;
}
p {
padding: 15px;
background-color:
#fff799;
border: 2px solid red;
}
h1 {
clear: left;
}
Xem hình minh họa,
Lab2.5.a (exercise 15-1, p.348 [3])
Float nhiều phần tử
Có thể thiết lập float cho nhiều phần tử trong một trang hoặc
trong một phần tử. Một trong những áp dụng của kĩ thuật này là chuyển một danh
sách các liên kết (list) thành một thanh trình đơn (menu) nằm ngang. Khi thiết
lập float cho nhiều phần tử, CSS sẽ có cơ chế xử lý để đảm bảo các phần tử
float không bị chồng lấn lên nhau, điểm quan trọng cần để ý là các phần tử float
sẽ được trôi dạt tuần tự về phía trái, hoặc phải (tùy theo kiểu float) và từ
trên xuống dưới.
Quan sát ví dụ sau,
[HTML]
<p>P1</p>
<p style="height: 200px;"
class="float">P2</p>
<p style="height: 230px;"
class="float">P3</p>
<p style="height: 250px;"
class="float">P4</p>
<p style="height: 200px;"
class="float">P5</p>
<p>P6</p>
<p>P7</p>
<p>P8</p>
<p>P9</p>
<p>P10</p>
[CSS]
p.float {
float: left;
width: 200px;
margin: 0px;
background: #ccc;
}
p {
border: 1px solid red;
}
Xem hình kết quả,
Ở hình trên, ba phần tử float đầu tiên được trôi dạt về phía
trái, xếp tuần tự trên cùng một hàng. Phần tử float thứ tư, do không đủ chỗ nên
được chuyển xuống dưới và trôi dạt về phía trái, cho tới khi nào gặp phải vật cản
thì dừng lại, ở ví dụ trên là gặp phải cạnh trái của cửa sổ trình duyệt. Tuy
nhiên, nếu một trong các phần tử float có chiều dài đủ lớn thì nó sẽ là vật cản
cho các phần tử float phía dưới. Ví dụ, thử tăng height của P2 lên 600px rồi quan sát kết quả (phần tử thứ tư sẽ bị
chặn trái bởi P2).
Dưới đây là áp dụng vào thực tế, sẽ tạo một trình đơn nằm
ngang từ danh sách không thứ tự (unordered list). Để đơn giản, ví dụ đã bỏ qua
giá trị URL của phần tử a.
[HTML]
<ul>
<li><a
href="#">Thời sự</a></li>
<li><a
href="#">Văn hóa</a></li>
<li><a
href="#">Kinh tế</a></li>
<li><a
href="#">Giáo dục</a></li>
<li><a
href="#">Thể thao</a></li>
</ul>
[CSS]
– Bỏ dấu đầu dòng (bullet), thiết lập padding và margin cho
vùng chứa thanh trình đơn (phần tử ul)
bằng 0,
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
– Sử dụng kĩ thuật float nhiều phần tử để float các mục của
danh sách (list item), kết quả là các mục sẽ nằm trên cùng một hàng ngang,
ul li {
float: left;
}
– Sử dụng thuộc tính display để chuyển phần tử a từ dạng inline sang dạng block, mục
đích là để thực hiện định dạng chiều cao, chiều rộng, padding, margin và các định
dạng khác cho mỗi mục của trình đơn,
ul li a {
color: #6e448e;
display: block;
text-decoration: none;
background-color:
#e5e5e5;
margin-left: 4px;
padding: 4px 8px;
}
ul li a:hover {
background-color:
#f5f5f5;
color: #88bfe1;
}
– Thiết lập thuộc tính clear cho phần tử tiếp sau trình đơn
để xóa bỏ chế độ float, đưa các phần tử về chế độ hiển thị thông thường.
-----------
Cập nhật [11/7/2018]
-----------
Xem thêm: Học làm web (45) - CSS căn bản (21)