Float” is often used to align elements horizontally.
Have you ever had a problem with other elements flowing in and out of your site?
For example, something like this.
width:100px;
height:100px;
margin:10px;
background:#f00;
float:left;
The element on the right has the css set as above.
The text is currently wrapped around the bottom of this red square.
1 2 3 4 5 6 7 8 |
<div style="width:100px;height:100px; margin:10px; background:#f00; float:left;"></div> <p>右はwidth:100px;<br> height:100px;<br> margin:10px;<br> background:#f00;<br> float:left;<br> The element on the right has the css set as above.<br> The text is currently wrapped around the bottom of this red square.</p> |
When you want to express something like this, it’s no problem, but when it looks like the sample shown below, you’re in trouble.
(The width of the text is set by subtracting the width of the red square and one character from the entire width on the right.)
This part is written outside of the previous div.
In the above case, the yellow marker part is shown below the div with the red square and text, but due to the continuous wrapping, it is shown in an unintended position.
The source looks like this.
1 2 3 4 5 6 |
<div style="width:100px;height:100px; margin:10px; background:#f00; float:left;"></div> <div style="float:right; width:calc(100% - 150px);"> <p>The CSS for the red square is the same. This time, I put float:right; in the div that encloses this text.<br> (The width of the text is set by subtracting the width of the red square and one character from the entire width on the right.)</p> </div> <p class="marker">This part is written outside of the previous div.</p> |
There are two ways to solve this kind of problem.
In this article, we will introduce these two methods.
Use [css] clear.
You can remove the wrapping by setting clear:both; on the element you want to remove.
1 2 3 4 5 6 |
<div style="width:100px;height:100px; margin:10px; background:#f00; float:left;"></div> <div style="float:right; width:calc(100% - 150px);"> <p>The CSS for the red square is the same. The float:right; is placed in the div that encloses this text.<br> (The width of the text is set by subtracting the width of the red square and one character from the entire width on the right.) </p> </div> <p style="clear:both;" class="marker">Set clear:both; to this part.</p> |
(The width of the text is set by subtracting the width of the red square and one character from the entire width on the right.)
Set clear:both; to this part.
It is useful to have this setting in your external css.
1 2 3 |
.clear{ clear:both; } |
If this has been written, you can easily set it to clear using class=”clear”.
Use clearfix to remove wrapping.
The clearfix method is different from the clear method in that it confines the wrapped element to a single box so that the wrapping does not affect other elements outside the box.
Let’s take the sample I mentioned above as an example.
1 2 3 4 5 6 7 8 9 10 |
<!--↓↓clearfix start here--> <div class="clearfix"> <div style="width:100px;height:100px; margin:10px; background:#f00; float:left;"></div> <div style="float:right; width:calc(100% - 150px);"> <p>The CSS for the red square is the same, with float:right; placed in the div that encloses this text.<br> (The width of the text is set by subtracting the width of the red square and one character from the entire width on the right.)</p> </div> </div> <!--↑↑clearfix ends here--> <p class="marker">Elements outside the clearfix will not be affected by the wrapping.</p> |
(The width of the text is set by subtracting the width of the red square and one character from the entire width on the right.)
Elements outside the clearfix will not be affected by the wrapping.
For more information about the contents of clearfix (css), please refer to here.