CSS3: CSS: clear
Các CSS sở hữu bộ dù một yếu tố phải được di chuyển xuống dưới (xóa) nổi yếu tố đứng trước nó. Tài sản áp dụng cho các yếu tố nổi và không nổi.clear clear
Khi được áp dụng cho các khối không nổi, nó di chuyển cạnh biên của phần tử xuống cho đến khi nó nằm dưới cạnh lề của tất cả các số float liên quan. Rìa ngang của khối không nổi sụp đổ.
Mặt khác giữa hai yếu tố nổi trên mặt khác sẽ không sụp đổ. Khi được áp dụng cho các phần tử nổi, cạnh lề của phần tử dưới cùng được di chuyển bên dưới cạnh lề của tất cả các phần nổi có liên quan. Điều này ảnh hưởng đến vị trí của những chiếc phao sau này, vì những chiếc phao sau này không thể được định vị cao hơn những chiếc phao trước đó.
Các float có liên quan sẽ bị xóa là các float trước đó trong cùng bối cảnh định dạng khối .
Cú pháp
/* Keyword values */
clear: none;
clear: left;
clear: right;
clear: both;
clear: inline-start;
clear: inline-end;
/* Global values */
clear: inherit;
clear: initial;
clear: unset;
Giá trị
none
Là một từ khóa chỉ ra rằng phần tử không được di chuyển xuống để xóa các phần tử nổi trong quá khứ.
left
Là một từ khóa chỉ ra rằng nguyên tố này được di chuyển xuống để xóa quá khứ trái nổi.
right
Là một từ khóa chỉ ra rằng phần tử được di chuyển xuống để xóa quá khứ nổi bên phải .
both
Là một từ khóa chỉ ra rằng phần tử được di chuyển xuống để xóa cả phao bên trái và bên phải.
inline-start
Là một từ khóa chỉ ra rằng phần tử được di chuyển xuống để xóa phần nổi ở phía bắt đầu của khối chứa của nó , đó là phần nổi bên trái trên tập lệnh ltr và phần bên phải nổi trên tập lệnh rtl.
inline-end
Là một từ khóa chỉ ra rằng phần tử được di chuyển xuống để xóa phần nổi ở phía cuối của khối chứa của nó , đó là phần nổi bên phải trên tập lệnh ltr và phần nổi bên trái trên tập lệnh rtl.
Cú pháp chính thức
none | left | right | both | inline-start | inline-end
Ví dụ
clear: left
HTML
<div class="wrapper">
<p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>
<p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p class="left">This paragraph clears left.</p>
</div>
CSS
.wrapper{
border:1px solid black;
padding:10px;
}
.left {
border: 1px solid black;
clear: left;
}
.black {
float: left;
margin: 0;
background-color: black;
color: #fff;
width: 20%;
}
.red {
float: left;
margin: 0;
background-color: pink;
width:20%;
}
p {
width: 50%;
}
clear: right
HTML
<div class="wrapper">
<p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>
<p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p class="right">This paragraph clears right.</p>
</div>
CSS
.wrapper{
border:1px solid black;
padding:10px;
}
.right {
border: 1px solid black;
clear: right;
}
.black {
float: right;
margin: 0;
background-color: black;
color: #fff;
width:20%;
}
.red {
float: right;
margin: 0;
background-color: pink;
width:20%;
}
p {
width: 50%;
}
clear: both
HTML
<div class="wrapper">
<p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor. Fusce pulvinar lacus ac dui.</p>
<p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>
<p class="both">This paragraph clears both.</p>
</div>
CSS
.wrapper{
border:1px solid black;
padding:10px;
}
.both {
border: 1px solid black;
clear: both;
}
.black {
float: left;
margin: 0;
background-color: black;
color: #fff;
width:20%;
}
.red {
float: right;
margin: 0;
background-color: pink;
width:20%;
}
p {
width: 45%;
}