clearfix
This block provides a CSS class that implements the clearfix layout hack, also known as the Easy Clearing Method. The hack allows you to clear wrapping for elements with the CSS float property, without making any changes to the document's original HTML structure.
This block can be used as a container for elements with the float property, or mixed with such a container.
Example when used as a container:
Open in a new window<div class="header" style="border : 2px solid blue;">Top element</div>
<div class="clearfix" style="border : 2px dotted yellow;">
<div class="float" style="float : left; border : 1px solid green;">Floating item 1</div>
<div class="float" style="float : left; border : 1px solid green;">Floating item 2</div>
</div>
<div class="footer" style="border : 2px solid red">Footer</div>
[
{
block: 'header',
attrs: {
style: 'border : 2px solid blue;'
},
content: 'Top element'
},
{
block: 'clearfix',
attrs: {
style: 'border : 2px dotted yellow;'
},
content: [
{
block: 'float',
attrs: {
style: 'float : left; border : 1px solid green;'
},
content: 'Floating item 1'
},
{
block: 'float',
attrs: {
style: 'float : left; border : 1px solid green;'
},
content: 'Floating item 2'
}
]
},
{
block: 'footer',
attrs: {
style: 'border : 2px solid red'
},
content: 'Footer'
}
]
[
'header',
'clearfix',
'float',
'footer'
]
Mixed with a container block:
Open in a new window<div class="header" style="border : 2px solid blue;">Top element</div>
<div class="some-container clearfix" style="border : 2px dotted yellow;">
<div class="float" style="float : left; border : 1px solid green;">Floating item 1</div>
<div class="float" style="float : left; border : 1px solid green;">Floating item 2</div>
</div>
<div class="footer" style="border : 2px solid red">Footer</div>
[
{
block: 'header',
attrs: {
style: 'border : 2px solid blue;'
},
content: 'Top element'
},
{
block: 'some-container',
mix: [
{
block: 'clearfix'
}
],
attrs: {
style: 'border : 2px dotted yellow;'
},
content: [
{
block: 'float',
attrs: {
style: 'float : left; border : 1px solid green;'
},
content: 'Floating item 1'
},
{
block: 'float',
attrs: {
style: 'float : left; border : 1px solid green;'
},
content: 'Floating item 2'
}
]
},
{
block: 'footer',
attrs: {
style: 'border : 2px solid red'
},
content: 'Footer'
}
]
[
'header',
'some-container',
'clearfix',
'float',
'footer'
]
Public block technologies
The block is implemented in: