Trước tiên, hãy xem ví dụ bên dưới. Chúng ta sẽ dùng một vài thẻ div
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="parent">
<div class="left">I am on the left</div>
<div class="right">I am on the right</div>
<div>I am normal div</div>
</div>
</body>
</html>Tiếp tục sử dụng CSS float để kéo các thẻ về đúng vị trí mong muốn.
<style>
div.parent {
border: 1px solid green;
padding: 10px;
}
div.left {
float: left;
border: 1px solid orange;
padding: 10px;
}
div.right {
float: right;
border: 1px solid orange;
padding: 10px;
}
</style>Tuy nhiên, kết quả không được như mong đợi:
Border của các thẻ cho thấy rằng, các thẻ con left và right đã hiển thị ra ngoài thẻ cha. Còn thẻ div cuối cùng không hiển thị bên dưới như mong đợi.
Chúng ta có 2 cách để xử lí trường hợp này
Cách 1: dùng css clear: both;
Chúng ta dùng thêm 1 element có css clear:both để ngắt tác dụng của float
<body>
<div class="parent">
<div class="left">I am on the left</div>
<div class="right">I am on the right</div>
<!-- Dùng thêm 1 element có css clear:both để ngắt tác dụng của float -->
<div style="clear: both"></div>
<div>I am normal div</div>
</div>
</body>Cách 2: dùng css overflow:hidden cho thẻ cha, nó sẽ có tác dụng cho các thẻ con.
div.parent {
border: 1px solid green;
padding: 10px;
overflow: hidden;
}Các thẻ con không muốn bị ảnh hưởng sẽ cần cho ra ngoài
<div class="parent">
<div class="left">I am on the left</div>
<div class="right">I am on the right</div>
</div>
<div>I am normal div</div>
Hãy là người đầu tiên bình luận chủ đề này.
Thêm bình luận/ đặt câu hỏi
