NTM Solutions

Chủ Nhật, 15 tháng 4, 2018

Tự học CSS - Bài 20 - Thuộc tính float và clear


 Quay về MỤC LỤC TỰ HỌC CSS


Thuộc tính float quyết định phần tử sẽ “nổi” như thế nào.
Thuộc tính clear quyết định phần tử nào sẽ “nổi lên” và “nổi lên” phía bên nào bên cạnh phần tử đã thiết lập clear.

1.    Thuộc tính float

Thuộc tính này thường được dùng để xác định vị trí và bố cục trong trang web.
Thuộc tính float có thể gán các giá trị sau:
·         left - phần tử sẽ nổi lên bên trái phần tử chứa nó.
·         right – phần tử sẽ nổi lên bên phải phần tử chứa nó.
·         none – phần tử không nổi lên (xuất hiện tại vị trí của nó trong đoạn văn).Đây là giá trị mặc định.
·         inherit – thừa kế giá trị thuộc tính float của phần tử chứa nó.
Cách sử dụng đơn giản thuộc tính float là dùng định dạng chữ bao quanh hình.
Ví dụ 1: cho hình nổi lên bên phải
img {
    float
: right;
}
và các giá trị HTML trong phần body:
<div>
<img src="hinh\linh.jpg" width="30%">
 <p>DÊ CON VÀ CÁO</p>
<p>Một con dê con được người chăn dê để lại trên mái chuồng dê để tránh cho nó khỏi bị thú dữ ăn thịt.</p>
<p>Dê con đang nhảy ra gần cạnh mái chuồng, bỗng nó nhìn thấy một con cáo và dê bắt đầu chế giễu cáo, nheo mũi và thỏa sức lăng mạ cáo.</p>
<p>Cáo nói,:“Ờ tao nghe mày chửi đây, điều mày nói chẳng hề hấn gì với tao đâu, nhưng coi chừng  mái chuồng  sắp xụp kia.”</p>
<p>Đừng bao giờ nói bất cứ điều gì không nên nói.</p>
</div>
Các bạn sửa thuộc tính float:none để xem sự khác biệt.
Ví dụ 2: Cho hình nổi lên bên trái
Ta sửa ví dụ trên lại thành:
img {
    float
: left;
}
Sau đó thử thiết lập thuộc tính float:none để thấy sự khác biệt.
Ví dụ 3:

2.    Thuộc tính clear

Thuộc tính clear xóa các phần tử nổi lên.
Thuộc tính này có thể nhận các giá trị sau:
·         none – cho phép phần tử nổi lên ở cả 02 bên.Đây là giá trị mặc định.
·         left – không cho phép phần tử nổi lên bên trái.
·         right – không cho phép phần tử nổi lên bên phải.
·         both – không cho nổi lên cả 02 bên.
·         inherit – thừa hưởng giá trị thuộc tính clear từ phần tử chứa nó.
Ví dụ 1 : ta dùng lại ví dụ 1 của phần float nhưng thêm các giá trị sau:
img {
    float
: left;
}
.boleft {
    clear
: left;
}
Và các giá trị HTML trong phần body:
<p class="boleft">DÊ CON VÀ CÁO</p>
Sau đó ta đổi thuộc tính clear: none để xem sự khác biệt.
Ghi chú: thường dùng thuộc tính clear này cho thẻ nằm ngay dưới phần tử float.
Ví dụ 2: thêm giá trị overflow:auto cho phần tử chứa giá trị float để tránh trường hợp phần tử float tràn ra ngoài khung chứa.
div {
    overflow
: auto;
    border: 3px solid green;
}
Trước khi thêm giá trị CSS  overflow:auto cho thẻ div (thẻ chứa đoạn văn trong ví dụ 1) , các bạn thử phóng to thu nhỏ để xem tấm hình bị tràn ra ngoài khung div.
Hoặc triệt để hơn (không xuất hiện scrollbar) các bạn làm như sau:
div{border:3px solid green;}
.clearfix::after{
    content: "";
    clear: both;
    display: table;
}
img{float:left}
trong phần body sửa thẻ div bao ngoài cùng
<div class="clearfix">

3.    Menu định hướng

01 ứng dụng của thuộc tính float là để làm menu trang web
Ví dụ:
ul {
    list-style-type
: none; /*bỏ dấu bullet*/
}
li {
    float
: left;  /* đưa các phần tử li lên nằm ngang*/
    display: inline;
    padding: 10px;
    background-color: gray;
}
Lophocvitinh.COM chỉ giới thiệu 01 menu đơn sơ nhất để các bạn hiểu rõ cách tạo menu bằng thuộc tính float. Phần “mắm muối” các bạn tự thêm vào nhé hoặc tham khảo phần tạo menu đa cấp.

4.    Ứng dụng giao diện web

Ta có thể ứng dụng thuộc tính float để thiết kế 01 giao diện web.
Ví dụ:
.header, .footer {
    background-color
: grey;
    color
: white;
    padding
: 15px;
}

.column
{
    float
: left;
    padding
: 15px;
}

.clearfix::after
{
    content
: "";
    clear
: both;
    display
: table;
}

.menu
{
    width
: 25%;
}

.content
{
    width
: 75%;
}
Và các giá trị HTML trong phần body:
<!DOCTYPE html>
<html>
<head>
<style>
* {
    box-sizing: border-box;
}
.header, .footer {
    background-color: grey;
    color: white;
    padding: 15px;
}
.column {
    float: left;
    padding: 15px;
}
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}
.menu {
    width: 25%;
}
.content {
    width: 75%;
}
.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.menu li {
    padding: 8px;
    margin-bottom: 8px;
    background-color: #33b5e5;
    color: #ffffff;
}
.menu li:hover {
    background-color: #0099cc;
}
</style>
</head>
<body>

<div class="header">
  <h1>Chania</h1>
</div>

<div class="clearfix">
  <div class="column menu">
    <ul>
      <li>The Flight</li>
      <li>The City</li>
      <li>The Island</li>
      <li>The Food</li>
    </ul>
  </div>

  <div class="column content">
    <h1>The City</h1>
    <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
    <p>You will learn more about web layout and responsive web pages in a later chapter.</p>
  </div>
</div>

<div class="footer">
  <p>Footer Text</p>
</div>

</body>
</html>
Nếu vẫn chưa rõ các bạn xem thêm video clip sau:

Nguồn: Lớp học vi tính .COM