Overflow, Float, Clear, Clearfix trong Css - #16

Đăng bởi: Minacode|Cập nhật:12-01-2024

Ok anh em, Tiếp theo chủ đề học nhanh Css cùng Minacode. Bài viết này mình sẽ nói về các khái niệm liên quan đến các thuộc tính Overflow, Float, Clear, Clearfix trong Css cũng như cách vận dụng của nó trong việc tạo layout cho trang web nhé. Nào let's go thôi!

Overflow trong Css

Thuộc tính overflow trong Css có tính năng kiểm soát những gì xảy ra với nội dung quá lớn để vừa với một khu vực hay vùng chứa nó.

<!DOCTYPE html>
<html>
<head>
<style>
#overflowTest {
  background: #4CAF50;
  color: white;
  padding: 15px;
  width: 500px;
  height: 100px;
  overflow: scroll;
  border: 1px solid #ccc;
}
</style>
</head>
<body>

<h2>Miancode|Overflow</h2>

<p>Mình có một cái div rộng 500px nhưng nội dung giới thiệu thì dài miên man lê thê. Vậy chuyện gì xảy ra nhé!</p>

<div id="overflowTest">

Nguyên đây! MinaCode là website mình tạo ra với mong muốn chia sẻ chút kiến thức liên quan đến lập trình FullStack.
Ngôn ngữ lập trình chủ yếu được sử dụng là Htm, Css, Javascript, Php cùng một số thư viện như Jquery, Fontawesome... Phía Frontend và Farmework Laravel phía Backend.
Mình tin rằng, Trong tương lai không xa. Lập trình sẽ trở nên một kỹ năng không thể thiếu đối với các bạn trẻ.
Cuối cùng thì Ngôn ngữ lập trình không quan trọng bằng Tư duy lập trình. Mình chúc các bạn sẽ có được những kiến thức bổ ích với MinaCode.
</div>

</body>
</html>

Ta có:

Thuộc tính overflow chỉ định cắt nội dung hay thêm thanh cuộn khi nội dung của một phần tử quá lớn để vừa với khu vực được chỉ định.

Thuộc tính overflow có các giá trị sau:

+ visible: Phần tràn không bị cắt bớt. Nội dung hiển thị bên ngoài hộp của phần tử
+ hidden: Phần tràn được cắt bớt và phần nội dung còn lại sẽ ẩn
+ scroll: Phần tràn được cắt bớt và thanh cuộn được thêm vào để xem phần còn lại của nội dung(giống ví dụ trên)
+auto: Tương tự như scroll, nhưng chỉ thêm thanh cuộn khi cần thiết

Ngoài ra còn có overflow-x và overflow-y.

Thuộc tính overflow-x và overflow-y chỉ định thay đổi phần tràn nội dung theo chiều ngang hay chiều dọc (hoặc cả hai):

+ overflow-x: chỉ định những việc cần làm với cạnh trái/phải của nội dung.
+ overflow-y: chỉ định những việc cần làm với các cạnh trên/dưới của nội dung.

Ví dụ:
<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: coral;
  width: 200px;
  height: 65px;
  border: 1px solid black;
  overflow-x: hidden;
  overflow-y: scroll;
}
</style>
</head>
<body>

<h2>Minacode|Overflow-x và overflow-y</h2>


<div>Nguyên đây! MinaCode là website mình tạo ra với mong muốn chia sẻ chút kiến thức liên quan đến lập trình FullStack.
Ngôn ngữ lập trình chủ yếu được sử dụng là Htm, Css, Javascript, Php cùng một số thư viện như Jquery, Fontawesome... Phía Frontend và Farmework Laravel phía Backend.
Mình tin rằng, Trong tương lai không xa. Lập trình sẽ trở nên một kỹ năng không thể thiếu đối với các bạn trẻ.
Cuối cùng thì Ngôn ngữ lập trình không quan trọng bằng Tư duy lập trình. Mình chúc các bạn sẽ có được những kiến thức bổ ích với MinaCode.
.</div>

</body>
</html>

Ta có:

Float và Clear trong Css

Float

Thuộc tính float chỉ định cách một phần tử sẽ nổi. Nó được sử dụng để định vị và định dạng nội dung, ví dụ: để hình ảnh nổi bên trái văn bản trong vùng chứa.

Thuộc tính float có thể có một trong các giá trị sau:

+left: Phần tử nổi bên trái vùng chứa của nó
+right: Phần tử nổi bên phải vùng chứa của nó
+none: Phần tử không nổi (sẽ hiển thị ngay tại vị trí nó xuất hiện trong văn bản). Đây là mặc định
+ inherit: Phần tử kế thừa giá trị float của phần tử cha

Trong cách sử dụng đơn giản nhất, thuộc tính float có thể được sử dụng để bao văn bản xung quanh hình ảnh.

Ví dụ:
<!DOCTYPE html>
<html>
<head>
<style>
img {
  float: right;
}
</style>
</head>
<body>

<h2>Minacode|Float Right</h2>

<p><img src="https://minacode.net/public/frontend/images/minacode.png" alt="Pineapple" style="width:100px;margin-left:15px;">
Nguyên đây! MinaCode là website mình tạo ra với mong muốn chia sẻ chút kiến thức liên quan đến lập trình FullStack. Ngôn ngữ lập trình chủ yếu được sử dụng là Htm, Css, Javascript, Php cùng một số thư viện như Jquery, Fontawesome... Phía Frontend và Farmework Laravel phía Backend.
Mình tin rằng, Trong tương lai không xa. Lập trình sẽ trở nên một kỹ năng không thể thiếu đối với các bạn trẻ.
Cuối cùng thì Ngôn ngữ lập trình không quan trọng bằng Tư duy lập trình. Mình chúc các bạn sẽ có được những kiến thức bổ ích với MinaCode.
.</p>

</body>
</html>

Ta có:

`clear`

Thuộc tính clear chỉ định phần tử nào có thể nổi bên cạnh phần tử đã xóa và ở phía nào.

Khi chúng ta sử dụng thuộc tính float và muốn phần tử tiếp theo ở bên dưới (không phải ở bên phải hoặc bên trái), chúng ta sẽ phải sử dụng thuộc tính clear cho phần tử đó. Thuộc tính clear chỉ định điều gì sẽ xảy ra với phần tử bên cạnh phần float.

Thuộc tính clear có thể có một trong các giá trị sau:

+none: Phần tử không bị đẩy xuống dưới các phần tử nổi bên trái hoặc bên phải. Đây là mặc định
+left: Phần tử được đẩy xuống dưới phần tử nổi bên trái
+right: Phần tử được đẩy xuống dưới phần tử nổi bên phải
+both: Phần tử được đẩy xuống dưới cả phần tử nổi bên trái và bên phải
+inherit: Phần tử kế thừa giá trị rõ ràng từ phần tử cha của nó

Ví dụ:

<style>
.div1 {
  float: left;
  padding: 10px;
  border: 3px solid #73AD21;
}

.div2 {
  padding: 10px;
  border: 3px solid red;
}

.div3 {
  float: left;
  padding: 10px; 
  border: 3px solid #73AD21;
}

.div4 {
  padding: 10px;
  border: 3px solid red;
  clear: both;
}
</style>
</head>
<body>

<h2>không dùng thuộc tính clear</h2>
<div class="div1">div1</div>
<div class="div2">div2</div>
<br><br>

<h2>dùng clear</h2>
<div class="div3">div3</div>
<div class="div4">div4</div>

</body>
</html

Ta có:

`Hack Clearfix`

Nếu phần tử float cao hơn phần tử chứa nó, nó sẽ "tràn" ra ngoài vùng chứa của nó. Trường hợp này chúng ta có thể thêm một bản hack Clearfix để giải quyết vấn đề này.

.clearfix {
  overflow: auto;
}

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 3px solid #4CAF50;
  padding: 5px;
}

.img1 {
  float: right;
}

.img2 {
  float: right;
}

.clearfix {
  overflow: auto;
}
</style>
</head>
<body>

<h2>Không Clearfix</h2>


<div>
  <img class="img1" src="https://minacode.net/public/frontend/images/minacode.png" alt="Pineapple" width="170" height="170">
 Minacode! Kênh tự học lập trình miễn phí...
</div>

<h2 style="clear:right">Có Clearfix</h2>

<div class="clearfix">
  <img class="img2" src="https://minacode.net/public/frontend/images/minacode.png" alt="Pineapple" width="170" height="170">
 Minacode! Kênh tự học lập trình miễn phí......
</div>

</body>
</html>

Ta có:

Một cách khác trong Hack Clearfix an toàn hơn khi sử dụng và được sử dụng cho hầu hết các trang web để thay thế cho:

.clearfix {
  overflow: auto;
}

Đó là:

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

Grid of Box

Với thuộc tính float này, thật dễ dàng để thả nổi các box nội dung cạnh nhau:

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<style>
* {
 box-sizing: border-box;
}

.box {
 float: left;
 width: 33.33%;
 padding: 50px;
}

.clearfix::after {
 content: "";
 clear: both;
 display: table;
}
</style>
</head>
<body>

<h2>Minacode|Grid of Boxes</h2>
<p>Float boxes liền kề:</p>

<div class="clearfix">
 <div class="box" style="background-color:#bbb">
 <p>Nội dung 1.</p>
 </div>
 <div class="box" style="background-color:#ccc">
 <p>Nội dung 2.</p>
 </div>
 <div class="box" style="background-color:#ddd">
 <p>Nội dung 3.</p>
 </div>
</div>

</body>
</html>

Ta có:

Đặc biệt lưu ý:

Nó sẽ có một vấn đề xuất hiện khúc này như sau: Nếu nội dung 1 nó có nhiều hơn so với ví dụ trên thì cái chiều cao các div nó sẽ khác nhau.

Nhìn sẽ không được đẹp đúng không? Nếu chúng ta tạo một chiều cao cố định cho các div thì sẽ không được linh hoạt lắm. Lúc đó bắt buộc nội dung cần phải phù hợp với chiều cao nếu không nó sẽ tràn ra ngoài.

Đó là lý do chúng ta nên sử dụng Flexbox . Nội dung về flexbox này mình sẽ chia sẻ chi tiết sau nhé!

>>Còn tiếp>>