Home > Article > Web Front-end > css don’t forget to clear floats clear:both
css don’t forget to clear floats clear:both
- 高洛峰Original
- 2017-02-04 09:31:021460browse
Clear with empty tags
.clr {clear: both;}
Left
;
; overflow attribute
#layout {overflow:auto; zoom:1;}
Use :after (non-IE browser)
#layout:after{
display: block;
clear: both; content: "";
visibility:hidden; height: 0;
}
Note: Use :after required Note a few points, set the height to zero (height: 0;); content is required, but its value can be empty
;
Right
; overflow attribute
#layout {overflow:auto; zoom:1;}
Left
Right
Use :after (non-IE browser)
#layout:after{
display: block;
clear: both; content: "";
visibility:hidden; height: 0;
}
Left
Right
For more css, don’t forget to clear the floating clear:both For related articles, please pay attention to the PHP Chinese website!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Summary of CSS clear float methodsNext article：Summary of CSS clear float methods
Related articles
See more- How to Fix Vertical Column Alignment Issues When Migrating from Bootstrap 3 to Bootstrap 4?
- How Do I Create a Circular Menu with Icons Using Pure CSS?
- How to achieve grid wrapping in CSS without media queries?
- How to Eliminate Vertical Space Between Columns in Bootstrap 4?
- How to Create a Responsive, Square-Shaped Div in CSS?