Học làm web (44) - CSS căn bản (20)

Tiếp theo của: Học làm web (43) - CSS căn bản (19)
----
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ả imgspan đề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: Tổng hợp các bài viết về Học làm web
Xem thêm: Học làm web (45) - CSS căn bản (21)