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;
}
float: right;
}
và các giá trị HTML trong phần
body:
<div>
<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;
}
float: left;
}
Sau đó thử thiết lập thuộc tính float:none để thấy sự khác
biệt.
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;
}
float: left;
}
.boleft {
clear: left;
}
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;
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*/
}
list-style-type: none; /*bỏ dấu bullet*/
}
li {
float: left; /* đưa các phần tử li lên nằm ngang*/
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%;
}
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:
Tác giả: #drM
Nguồn: Sưu Tầm
Nguồn: Sưu Tầm
Không có nhận xét nào:
Đăng nhận xét