What is the use of style= clear:both ?
clear:both
makes the element drop below any floated elements that precede it in the document.
You can also use clear:left
or clear:right
to make it drop below only those elements that have been floated left or right.
+------------+ +--------------------+
| | | |
| float:left | | without clear |
| | | |
| | +--------------------+
| | +--------------------+
| | | |
| | | with clear:right |
| | | (no effect here, |
| | | as there is no |
| | | float:right |
| | | element) |
| | | |
| | +--------------------+
| |
+------------+
+---------------------+
| |
| with clear:left |
| or clear:both |
| |
+---------------------+
What does both mean in div style= clear:both
Both means "every item in a set of two things". The two things being "left" and "right"
How use clear:both?
can you please check this DEMO, it may be help you. use DIV instead of span.
What does the CSS rule clear: both do?
I won't be explaining how the floats work here (in detail), as this question generally focuses on Why use clear: both;
OR what does clear: both;
exactly do...
I'll keep this answer simple, and to the point, and will explain to you graphically why clear: both;
is required or what it does...
Generally designers float the elements, left or to the right, which creates an empty space on the other side which allows other elements to take up the remaining space.
Why do they float elements?
Elements are floated when the designer needs 2 block level elements side by side. For example say we want to design a basic website which has a layout like below...
Live Example of the demo image.
Code For Demo
/* CSS: */
* { /* Not related to floats / clear both, used it for demo purpose only */ box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}
header, footer { border: 5px solid #000; height: 100px;}
aside { float: left; width: 30%; border: 5px solid #000; height: 300px;}
section { float: left; width: 70%; border: 5px solid #000; height: 300px;}
.clear { clear: both;}
<!-- HTML --><header> Header</header><aside> Aside (Floated Left)</aside><section> Content (Floated Left, Can Be Floated To Right As Well)</section><!-- Clearing Floating Elements--><div class="clear"></div><footer> Footer</footer>
br clear= all vs css solution
On the next item you can use the style clear:left
.
Another alternative is to set the overflow
style on the parent of the floating element to make it contain it, like overflow:hidden
.
Related Topics
Are Empty HTML5 Data Attributes Valid
How to Make Bootstrap 3 Fluid Layout Without Horizontal Scrollbar
How to Put Text Over Images in HTML
Youtube Embedded Video: Autoplay Feature Not Working in Iphone
Problem with <Select> and :After with CSS in Webkit
Using HTML5, How to Use Contenteditable Fields in a Form Submission
Display HTML Child Element When Parent Element Is Display:None
Why Should I Prepend My Custom Attributes with "Data-"
How to Run an External Program, E.G. Notepad, Using Hyperlink
Why Is My Textarea Higher Up Than Its Neighbor
How Does This CSS Produce a Circle
Difference Between Iframe, Embed and Object Elements
How to Force a Page Break in HTML Printing
Easier Way to Create Circle Div Than Using an Image