A little while ago we wrote about the property. So, now is a good time to explain the property. float clear The clear property is directly related to the float property. It specifies if an element should be next to the floated elements or if it should move below them. This property applies to elements. both floated and non-floated If an element can fit in the horizontal space next to the floated elements, . Unless you apply the clear property to that element in . Then the element will the floated elements. it will the same direction as the float move below Every element created in CSS needs to have the added. quality design The clear property can have following values: - the element is to clear past floats. None not moved down - the element is moved down to clear past floats. Left left - the element is moved down to clear past floats. Right right - the element is moved down to clear past floats. Both both left and right Support After consulting the service, we see that the support is . Can I Use over 87% Examples HTML Cardigan aesthetic direct trade, migas locavore shoreditch DIY bicycle rights lyft street art bitters. < = > div class ”container” < = > div class ”left-segment” </ > div < = > div class ”left-segment” </ > div < = > p class ”text-clear” </ > p </ > div CSS { : solid thin ;
} { : left; : ; : ; : ; : ;
} { : left;
} .container border #ccc .left-segment float background-color #C98EED height 200px width 200px margin-right 10px .text-clear clear Here we can see divs that have applied to them. After we have set to the text paragraph, it the floated elements. float: left clear: left moved below HTML Cardigan aesthetic direct trade, migas locavore shoreditch DIY bicycle rights lyft street art bitters. < = > div class ”container” < = > div class ”right-segment” </ > div < = > div class ”right-segment” </ > div < = > p class ”text-clear” </ > p </ > div CSS { : solid thin ;
} { : right; : ; : ; : ; : ;
} { : right;
} .container border #ccc .right-segment float background-color #8FC9FF height 200px width 200px margin-left 10px .text-clear clear Next, we see two divs with the property and a paragraph with the property. By setting this, the paragraph gets moved . float: right clear: right below the floated elements Now is the good time to add to the text. some formatting HTML Cardigan aesthetic direct trade, migas locavore shoreditch DIY bicycle rights lyft street art bitters. < = > div class ”container” < = > div class ”left-segment” </ > div < = > div class ”right-segment” </ > div < = > p class ”text-clear” </ > p </ > div CSS { : solid thin ;
} { : left; : ; : ; : ;
} { : right; : ; : ; : ;
} { : both;
} .container border #ccc .left-segment float background-color #8FC9FF height 200px width 200px .right-segment float background-color #8FC9FF height 200px width 200px .text-clear clear Finally, the last example shows the usage of the property. The two divs are floated , while the paragraph has the clear property added to it. With this, it gets both of the . It's good to mention that this is the most commonly used clear property. clear: both left and right moved below floated elements Summary Hope this article will help you in your projects. Be careful when using this property, it is known to have caused a lot of confusion in the past. But, we are sure that after reading this article, you are good to go! Happy coding! Previously published at kolosek.com/css-clear-float/

Lyft

How to Clear Floats using clear-float property

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Active Record Associations in Rails

10 VSCode Extensions To Make Your Life Easier

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Tips For Junior Developers To Succeed in Code

10 Things Every Beginner Should Know When Learning Javascript And React

Active Record Associations in Rails

10 VSCode Extensions To Make Your Life Easier

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Tips For Junior Developers To Succeed in Code

10 Things Every Beginner Should Know When Learning Javascript And React

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps