Phần tử nổi với CSS

Thuộc tính float CSS được sử dụng để định vị hoặc định dạng hộp hoặc nội dung. Nhà phát triển có thể định vị phần tử về phía trái hoặc phải bằng CSS float.

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

còn lại - Phần tử nổi ở bên trái vùng chứa của nó
đúng - Phần tử nổi ở bên phải vùng chứa của nó
không - Phần tử không float. Nó là giá trị mặc định
kế thừa - Phần tử kế thừa giá trị float của phần tử gốc của nó

Ví dụ

Hãy xem một ví dụ về thuộc tính CSS Float -

<!DOCTYPE html>
<html>
<head>
<title>CSS Float</title>
<style>
form {
   width:70%;
   margin: 0 auto;
   text-align: center;
}
input[type="button"] {
   border-radius: 10px;
}
#container {
   display: flex;
   flex-direction: column-reverse;
   justify-content: center;
   align-items: center;
}
.child{
   height: 40px;
   width: 40px;
   color: white;
   border: 4px solid black;
}
.orange{
   background-color: #FF8A00;
}
.red{
   background-color: #F44336;
}
.violet{
   background-color: #C303C3;
}
.green{
   background-color: #4CAF50;
}
.blue{
   background-color: #03A9F4;
}
.yellow{
   background-color: #FEDC11;
}
#left{
   display: flex;
   float: left;
}
#right{
   display: flex;
   float: right;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS-Float</legend>
<div id="container">
<div class="child orange"></div><div class="child red"></div><div class="child violet"></div><div class="child green"></div><div class="child blue"></div><div class="child yellow"></div>
</div><br>
<input type="button" value="float-->left" onclick="floatDecider('left')">
<input type="button" value="float-->right" onclick="floatDecider('right')">
<div><div id="left"></div><div id="right"></div></div>
</fieldset>
</form>
<script>
   var left = document.getElementById('left');
   var right = document.getElementById('right');
   function floatDecider(direction){
      var allChildren = document.getElementsByClassName('child');
      if(direction === 'left')
         left.insertAdjacentElement('beforeend',allChildren[0]);
      else
         right.insertAdjacentElement('afterbegin',allChildren[0]);
   }
</script>
</body>
</html>

Đầu ra

Điều này sẽ tạo ra kết quả sau -

Trước khi nhấp vào bất kỳ nút nào -

Phần tử nổi với CSS

Nhấp vào ‘ float -> left Nút '4 lần -

Phần tử nổi với CSS

Nhấp vào ‘ float -> righ nút t ’-

Phần tử nổi với CSS