...

View Full Version : Does 'clear' apply to inline elements?



IanIan
01-18-2013, 06:52 PM
<style>

.style1 li { width:220px;
float:left;
}


</style>

<ul class="style1">
<li><input type="checkbox" value="1">Value</li>
<li><input type="checkbox" value="1">Value</li>
</ul>
<span style="clear: both;">Hello</span>

With the above code the span doesn't clear the list. But it does if I make it a block element.

AndrewGSW
01-18-2013, 07:07 PM
Yes, clear doesn't apply to inline elements. Well, .. it does officially, but because of the way inline elements work it won't have the desired effect.

In the demonstration below the span element won't pop-up above the UL if there isn't enough room for it. Try increasing the width of the DIV to see the effect.


<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style type="text/css">
.style1 {
width: 100px;
float: left;
outline: 1px solid blue;
}
div {
width: 100px;
}
</style>
</head>

<body>
<div>
<ul class="style1">
<li><input type="checkbox" value="1">Value</li>
<li><input type="checkbox" value="1">Value</li>
</ul>
<span style="clear: both;">Hello</span>
</div>

</body>
</html>

But you don't really want to do this; just use a block-level element (P or DIV).

Added: Actually, the clear:both has no effect on the in-line element. The W3 says you can apply it to in-line elements but it's ineffectual.

IanIan
01-21-2013, 10:37 AM
'Clear' on an inline element is allowed but it has no effect. :confused: Is there a theoretical explanation as to why it has no effect?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum