stop float left
<div style="clear:both;"></div>css float property
/*
Nowadays with flex and grid, float has no chance to be putted inside your code
But just for the knowledge of using this property.
===========================NOTICE===========================
you should use the 'clear' CSS property after the div that has the float prop
===========================NOTICE===========================
*/
.div-1{
float: left;
width: 50%;
background-color: #f00;
}
/*
after applying float i used clear: both
try this code and remove the clear property and see what will be happened
*/
.clear-float{
clear: both;
}
.div-2{
float: left;
width: 50%;
background-color: #00f;
}
.clear-float{
clear: both;
}
/* div-1 and div-2 will now be at the side of each other*/
/*
==========HTML Layout==========
<div class="div-1">DIV 1</div>
<div class="clear-float"></div>
<div class="div-2">DIV 2</div>
<div class="clear-float"></div>
*/how to clear floats
This is the code
.float-wrapper::after {
content: "";
clear: both;
display: block;
}
---------------------------------------------------------------
Explanation:
.float-wrapper -> is some parent element that wraps the floating items
example:
<div class='float-wrapper'>
<div class='floating-item'> </div>
<div class='floating-item'> </div>
....
</div>
::after adds an element after the .float-wrapper, that
has no content and clears floats from the both sides, making sure,
other sections are not affected by floatsfloat css
who uses floats?! (for beginners: use flexbox and grid)Copyright © 2021 Codeinu
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems resetting your password contact us
