A clearfix is a way for an element to automatically clear or fix its elements, so that do not need to add additional markup. It is generally used in float layout where elements are floated to be stacked horizontally. If the element is taller than the element containing it then use overflow property of CSS to overcome this.
In the above image logo is not fit into the div element. To fix this problem there are two ways. First is by increasing the height of the div block and second by the use of clearfix CSS property.
Example 1: In the code below problem is fixed without using overflow property.
Example 2: In this code, the problem is fixed using overflow property.
- Clearfix in Bootstrap
- Strict Aliasing Rule in C with Examples
- How to set the offset property for ScrollSpy in Bootstrap ?
- How to use bootstrap-select for dropdown ?
- How to define the number of columns a cell should span using HTML5 ?
- How to achieve <fieldset> like effect without using <fieldset> tag ?
- How to use grid-breakpoint class in Bootstrap ?
- Node urlSearchParams.keys() Method
- Lodash _.difference() Function
- Express.js req.fresh Property
- Vue.js v-on:keyup Directive
- Express.js res.sendStatus() Function
- Express.js req.query Property
- Express.js res.headersSent Property
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.