Hướng dẫn clear float css

Question

Nhóm phát triển của chúng tôi vừa ra mắt website langlearning.net học tiếng Anh, Nga, Đức, Pháp, Việt, Trung, Hàn, Nhật, ... miễn phí cho tất cả mọi người.
Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.

Nội dung chính Show

1- CSS float
2- Ví dụ với CSS float
3- CSS Clear
4- CSS Clear cho phần tử nổi
5- CSS Clear cho phần tử khối

Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới.

Facebook

1- CSS float

CSS {float: left | right | inline-start | inline-end} làm một phần tử nổi (float) ở bên cạnh trái hoặc cạnh phải của phần tử chứa nó. Nó cho phép các nội dung văn bản và các nội dung nội tuyến (inline content) bao quanh nó.

Syntax


/* Keyword values */
float: left;
float: right;
float: none;
float: inline-start;
float: inline-end;

/* Global values */
float: inherit;
float: initial;
float: unset;

CSS {float: left}

Làm cho phần tử nổi (float) ở bên cạnh trái của phần tử chứa nó.

CSS {float: right}

Làm cho phần tử nổi (float) ở bên cạnh phải của phần tử chứa nó.

CSS {float: inline-start}

CSS {float: inline-start} hoạt động giống với CSS {float: left} nếu phần tử cha có chiều từ trái sang phải (Left to Right - LTR)
CSS {float: inline-start} hoạt động giống với CSS {float: right} nếu phần tử cha có chiều từ phải sang trái (Right to Left - RTL)

CSS {float: inline-end}

CSS {float: inline-end} hoạt động giống với CSS {float: right} nếu phần tử cha có chiều từ trái sang phải (Left to Right - LTR)
CSS {float: inline-end} hoạt động giống với CSS {float: left} nếu phần tử cha có chiều từ phải sang trái (Right to Left - RTL)

CSS {float: none}

Loại bỏ trạng thái nổi (float) của phần tử.

Ví dụ với CSS {float: left | right}:

float-example.html




   
      CSS float
      
      
      
   
   
       CSS float 
        None

        Left

        Right
       
       
             
                {float: none} (Default)
             
             Apollo 11 was the spaceflight that landed the first humans,
             Americans Neil Armstrong and Buzz Aldrin,
             on the Moon on July 20, 1969, at 20:18 UTC.
             Armstrong became the first to step onto the lunar
             surface 6 hours later on July 21 at 02:56 UTC.

             Armstrong spent about three and a half two
             and a half hours outside the spacecraft,
             Aldrin slightly less; and together they
             collected 47.5 pounds (21.5 kg) of lunar material
             for return to Earth. A third member of the mission,...

Nếu bạn áp dụng CSS {float: left | right | inline-start | inline-end} cho một phần tử nội tuyến (inline element), trình duyệt sẽ tự động biến phần tử này thành phần tử khối (block element). Cụ thể CSS {display:inline} sẽ biến thành CSS {display:block}. Nó cũng có thể biến đổi các giá trị khác của CSS display.

Original value	Computed value
{display:inline}	{display:block}
{display:inline-block}	{display:block}
{display:inline-table}	{display:table}
{display:table-row}	{display:block}
{display:table-row-group}	{display:block}
{display:table-column}	{display:block}
{display:table-column-group}	{display:block}
{display:table-cell}	{display:block}
{display:table-caption}	{display:block}
{display:table-header-group}	{display:block}
{display:table-footer-group}	{display:block}
{display:inline-flex}	{display:flex}
{display:inline-grid}	{display:grid}
other	unchanged

Xem thêm:

Dưới đây là một ví dụ, phần tử nội tuyến sẽ được đối xử như một phần tử khối khi bạn áp dụng CSS {float: left | right | inline-start | inline-end} cho nó.

float-example2.html




   
      CSS float
      
      
      
   
   
      CSS float with Inline Element
       None

       Left

       Right
      
      
         
           I am a Span Element.
           {width: 180px; height: 50px;}
         

         Apollo 11 was the spaceflight that landed the first humans,
         Americans Neil Armstrong and Buzz Aldrin,
         on the Moon on July 20, 1969, at 20:18 UTC.
         Armstrong became the first to step onto the lunar
         surface 6 hours later on July 21 at 02:56 UTC.
         Armstrong spent about three and a half two
         and a half hours outside the spacecraft,
         Aldrin slightly less; and together they
         collected 47.5 pounds (21.5 kg) of lunar material
         for return to Earth. A third member of the mission,...

2- Ví dụ với CSS float

Khi một phần tử được thả nổi (floated), nó sẽ thoát ra khỏi quy tắc bố trí thông thường của tài liệu. Nó sẽ bị dịch chuyển sang trái (Hoặc sang phải) cho tới khi chạm vào cạnh của phần tử cha, hoặc chạm vào phần tử nổi (floating element) khác.

float-example3.html




   
      CSS float
      
      
   
   
      CSS float
      
         Apollo 11 was the spaceflight that landed the first humans,
         Americans Neil Armstrong and Buzz Aldrin,
         on the Moon on July 20, 1969, at 20:18 UTC.
         
              Float left
         
         
              Float right
         
         
              Float left
         
         Armstrong became the first to step onto the lunar
         surface 6 hours later on July 21 at 02:56 UTC.
         Armstrong spent about three and a half two
         and a half hours outside the spacecraft,
         Aldrin slightly less; and together they
         collected 47.5 pounds (21.5 kg) of lunar material
         for return to Earth. A third member of the mission,...

Ví dụ ảnh (image) với CSS float:

img-float-example.html




   
      CSS float Image
      
      
   
   
      CSS float Image
      
         Apollo 11 was the spaceflight that landed the first humans,
         Americans Neil Armstrong and Buzz Aldrin,
         on the Moon on July 20, 1969, at 20:18 UTC.
         

         Armstrong became the first to step onto the lunar
         surface 6 hours later on July 21 at 02:56 UTC.
         Armstrong spent about three and a half two
         and a half hours outside the spacecraft,
         Aldrin slightly less; and together they
         collected 47.5 pounds (21.5 kg) of lunar material
         for return to Earth. A third member of the mission,...

3- CSS Clear

CSS {clear: left | right} được áp dụng cho một phần tử để không cho phép một phần tử khác nổi (float) bên trái hoặc bên phải của nó. CSS clear chỉ hoạt động nếu thỏa mãn các điều kiện sau:

Trong code, phần tử hiện tại () phải được viết sau phần tử nổi ().
Phần tử hiện tại phải là một phần tử nổi (floating element) hoặc là một phần tử khối (block element).

Chú ý: Nếu CSS {clear: left | right} hoạt động, nó sẽ đẩy phần tử hiện tại xuống dòng tiếp theo.

Syntax


/* Keyword values */
clear: none;
clear: left;
clear: right;
clear: both;
clear: inline-start;
clear: inline-end;

/* Global values */
clear: inherit;
clear: initial;
clear: unset;

CSS {clear: inline-start}

CSS {clear: inline-start} hoạt động giống với CSS {clear: left} nếu phần tử cha có chiều từ trái sang phải (Left to Right - LTR)
CSS {clear: inline-start} hoạt động giống với CSS {clear: right} nếu phần tử cha có chiều từ phải sang trái (Right to Left - RTL)

CSS {clear: inline-end}

CSS {float: clear-end} hoạt động giống với CSS {clear: right} nếu phần tử cha có chiều từ trái sang phải (Left to Right - LTR)
CSS {clear: inline-end} hoạt động giống với CSS {clear: left} nếu phần tử cha có chiều từ phải sang trái (Right to Left - RTL)

CSS {clear: both}

CSS {clear: both} = {clear: left} + {clear: right}.

CSS {clear: none}

Loại bỏ CSS Clear ra khỏi phần tử.

4- CSS Clear cho phần tử nổi

CSS {clear: left | right} có thể áp dụng cho một phần tử nổi (floating element) - {float: left | right | inline-start | inline-end | both}, để ngăn chặn một phần tử nào đó nổi bên trái hoặc bên phải nó.

Dưới đây là các hình minh họa các tình huống có thể xẩy ra:

Hai phần tử cùng nổi trái - {float:left}. Áp dụng CSS {clear: left} cho phần tử thứ hai sẽ đẩy nó xuống dòng tiếp theo, để đảm bảo rằng phần tử thứ nhất không còn nổi bên trái nó.

Phần tử hiện tại nổi phải - {float:right}, còn phần tử kia nổi trái - {float:left}. Áp dụng CSS {clear: left} cho phần tử hiện tại sẽ đẩy nó xuống dòng tiếp theo, để đảm bảo rằng phần tử kia không còn nổi bên trái nó.

Phần tử hiện tại nổi trái - {float:left}, còn phần tử kia nổi phải - {float:right}. Áp dụng CSS {clear: right} cho phần tử hiện tại sẽ đẩy nó xuống dòng tiếp theo, để đảm bảo rằng phần tử kia không còn nổi bên phải nó.

Hai phần tử cùng nổi phải - {float:right}. Áp dụng CSS {clear: right} cho phần tử hiện tại sẽ đẩy nó xuống dòng tiếp theo, để đảm bảo rằng phần tử kia không còn nổi bên phải nó.

Ví dụ:

clear-example1.html




   
      CSS Clear
      
      
      
   
   
       CSS Clear
       
         #floating-element 


          float:left 

          float:right
       
       
         #current-element 


          float:left 

          float:right
       
       
         #current-element 


          clear:none 

          clear:left 

          clear:right
        
       
       
          CASE: #current-element is a Floating Element.
       
       
            
              FLOATING-ELEMENT 

              {float: left}
            
            
              CURRENT-ELEMENT 

              {float: left}

clear-example1.css


.option {
  display: inline-block;
  width: 130px;
  margin-right: 5px;
  padding: 5px;
  border: 1px solid black;
}
.container {
  background-color: #eee;
  padding: 15px;
  height: 200px;
}
.container div {
   margin: 5px;
   padding:10px;
}
#current-element {
    float: left;
    width: 170px;
    height: 100px;
    background: yellow;
    border: 1px solid red;
}
#floating-element {
   float: left;
   width: 160px;
   height: 80px;
   background: lightgreen;
}

clear-example1.js


var floatValue1 = "left"; // FLOATING-LEMENT
var floatValue2 = "left"; // CURRENT-LEMENT
var clearValue2 = "none"; // CURRENT-LEMENT

function changeFloat1(event)  {
   floatValue1 = event.target.value;
   var myElement1 = document.getElementById("floating-element");
   myElement1.style.float = floatValue1;
   myElement1.innerHTML = "FLOATING-ELEMENT
{float: "+ floatValue1+"}";
}
function changeFloat2(event)  {
   floatValue2 = event.target.value;
   var myElement2 = document.getElementById("current-element");
   myElement2.style.float = floatValue2;
   myElement2.innerHTML = "CURRENT-ELEMENT
"
                         +"{float: "+ floatValue2+"}
"
                         +"{clear: "+ clearValue2+"}";
}
function changeClear2(event)  {
   clearValue2 = event.target.value;
   var myElement2 = document.getElementById("current-element");
   myElement2.style.clear = clearValue2;
   myElement2.innerHTML = "CURRENT-ELEMENT
"
                         +"{float: "+ floatValue2+"}
"
                         +"{clear: "+ clearValue2+"}";
}

5- CSS Clear cho phần tử khối

CSS {clear: left | right} có thể áp dụng cho một phần tử khối (block element) - {display:block}, để ngăn chặn một phần tử nào đó nổi bên trái hoặc bên phải nó.

Chú ý: Trong code, phần tử khối áp dụng CSS {clear: left | right} phải được viết sau phần tử nổi (Floating element).

Nếu phần tử hiện tại (#current-element) là phần tử khối. Dưới đây là các hình minh họa các tình huống có thể xẩy ra:

clear-example2.html




   
      CSS Clear
      
      
      
   
   
       CSS Clear
       
         #floating-element 


          float:left 

          float:right
       
       
         #current-element 


          clear:none 

          clear:left 

          clear:right
        
       
       
          CASE: #current-element is a Block Element.
       
       
            
              FLOATING-ELEMENT 

              {float: left}
            
            
              CURRENT-ELEMENT

clear-example2.css


.option {
  display: inline-block;
  width: 130px;
  margin-right: 5px;
  padding: 5px;
  border: 1px solid black;
}
.container {
  background-color: #eee;
  padding: 15px;
  height: 200px;
}
.container div {
   margin: 5px;
   padding:10px;
}
#current-element {
    height: 120px;
    margin: 10px;
    background: yellow;
    border: 1px solid red;
}
#floating-element {
   float: left;
   width: 160px;
   height: 80px;
   background: lightgreen;
}

clear-example2.js


var floatValue1 = "left"; // FLOATING-LEMENT
var clearValue2 = "none"; // CURRENT-LEMENT

function changeFloat1(event)  {
   floatValue1 = event.target.value;
   var myElement1 = document.getElementById("floating-element");
   myElement1.style.float = floatValue1;
   myElement1.innerHTML = "FLOATING-ELEMENT
{float: "+ floatValue1+"}";
}
function changeClear2(event)  {
   clearValue2 = event.target.value;
   var myElement2 = document.getElementById("current-element");
   myElement2.style.clear = clearValue2;
   myElement2.innerHTML = "CURRENT-ELEMENT
"
                         +"{clear: "+ clearValue2+"}";
}

Các phần tử nổi (floating element) đôi khi không tham gia vào việc làm tăng chiều cao cho phần tử cha, vì vậy bạn sẽ thấy một tình huống giống như hình minh họa dưới đây:

Thêm một phần tử khối với CSS {clear:both} như một phần tử con cuối cùng của phần tử cha sẽ giúp phần tử cha có chiều cao phù hợp, đủ để chứa hết tất cả các phần tử con.

clear-example3.html




   
      CSS Clear
      
      
      
   
   
       CSS Clear
       
         #current-element
          clear:none 

          clear:left 

          clear:right 

          clear:both
       
       
       
          CASE: #current-element is a Block Element.
       
       
            
              FLOATING 1 

              {float: right}
            
            
              FLOATING 2 

              {float: left}

clear-example3.css


.option {
  display: inline-block;
  margin-right: 5px;
  padding: 5px;
  border: 1px solid black;
}
.container {
  background-color: #eee;
  padding: 5px;
  border: 1px solid blue;
}
#floating-element1 {
   float: right;
   width: 100px;
   height: 40px;
   background: lightblue;
}
#floating-element2 {
   float: left;
   width: 120px;
   height: 80px;
   background: lightgreen;
} 
#current-element {
   border: 1px solid red;
}

clear-example3.js


// Change CSS Clear for #current-element.
function changeClear(event)  {
   var clearValue = event.target.value;
   var myElement = document.getElementById("current-element");
   myElement.style.clear = clearValue;
}

Chú ý: CSS {clear: left | right} sẽ không hoạt động nếu bạn áp dụng nó cho một phần tử nội tuyến (inline) hoặc nội tuyến khối (inline-block)

Ví dụ, CSS clear không làm việc khi bạn áp dụng nó cho phần tử nội tuyến (Inline element):

clear-not-work-example1.html




   
      CSS Clear
      
      
   
   
       CSS Clear does not work with Inline and Inline-block elements 
       
            
              FLOATING 

              {float: left}
            
            
              (Inline Element) - {clear: left} -
              Apollo 11 was the spaceflight that landed the first humans,
              Americans Neil Armstrong and Buzz Aldrin,
              on the Moon on July 20, 1969, at 20:18 UTC.
              Armstrong became the first to step onto the lunar
              surface 6 hours later on July 21 at 02:56 UTC.

              Armstrong spent about three and a half two
              and a half hours outside the spacecraft,
              Aldrin slightly less; and together they
              collected 47.5 pounds (21.5 kg) of lunar material
              for return to Earth. A third member of the mission,...

clear-not-work-example1.css


.container {
  background-color: #eee;
  padding: 15px;
  height: 200px;
}
#floating-element {
   float: left;
   width: 150px;
   height: 80px;
   background: lightgreen;
   padding:5px;
   margin: 5px;
}
#current-element {
   border: 1px solid lightblue;
   padding: 5px;
   display: inline;
   clear: left; /** Not work with Inline, Inline-Block Element */
}

Ví dụ, CSS clear không làm việc khi bạn áp dụng nó cho phần tử nội tuyến khối (Inline-block element):

clear-not-work-example2.html




   
      CSS Clear
      
      
   
   
       CSS Clear does not work with Inline and Inline-block elements 
       
            
              FLOATING 

              {float: left}
            
            
              (Inline-Block Element)  - {clear: left} -
              Apollo 11 was the spaceflight that landed the first humans,
              Americans Neil Armstrong and Buzz Aldrin,
              on the Moon on July 20, 1969, at 20:18 UTC.
              Armstrong became the first to step onto the lunar
              surface 6 hours later on July 21 at 02:56 UTC.

clear-not-work-example2.css


.container {
  background-color: #eee;
  padding: 15px;
  height: 200px;
}
#floating-element {
   float: left;
   width: 140px;
   height: 80px;
   background: lightgreen;
   padding:5px;
   margin: 5px;
}
#current-element {
   border: 1px solid lightblue;
   padding: 5px;
   width: 200px;
   display: inline-block;
   clear: left; /** Not work with Inline, Inline-Block Element */
}

programming css Clear float CSS Clear CSS Float trong CSS Clearfix trong CSS Display: flex Position CSS Flexbox Display trong CSS

Hướng dẫn clear float css

1- CSS float

CSS float

CSS float with Inline Element

2- Ví dụ với CSS float

CSS float

CSS float Image

3- CSS Clear

4- CSS Clear cho phần tử nổi

CSS Clear

5- CSS Clear cho phần tử khối

CSS Clear

CSS Clear

CSS Clear does not work with Inline and Inline-block elements

CSS Clear does not work with Inline and Inline-block elements

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội