Buying a SitePoint Premium membership will give you access to the full AtZ: CSS series.
F is for Float and Clear
Floating is great if you want to move an element to the left or right of a page, but unfortunately, you can’t dofloat: center to center an element. What a pain right?
Well, never fear, here’s the low down on centering all sorts of elements.
Tip 1
If the element is a block element, you can combinewidth and margin: auto.
margin: auto will automatically calculate the margins on the left and right sides, so they’re both equal, centering the block within its containing element.
See the Pen tip-margin-auto by SitePoint (@SitePoint) on CodePen.
Tip 2
If the element is inline (or inline-block), usetext-align: center on the parent container.
See the Pen tip-flexbox by SitePoint (@SitePoint) on CodePen.
Tip 3
If the element is absolutely positioned, combineleft and transform to center the element horizontally.
See the Pen tip-flexbox by SitePoint (@SitePoint) on CodePen.
A similar technique can also be used to vertically center elements, but more on that in a future tip!Tip 4
Use flexbox (another ‘F’ property, yay!) To use flexbox to center a single item (or group of items) you need to set two properties on the containing element:display: flex and justify-content: center.
See the Pen tip-flexbox by SitePoint (@SitePoint) on CodePen.
There are plenty of other cool things you can do with flexbox including growing or shrinking a containing element to best use the available space. You can even align an element both vertically and horizontally as opposed to blocking and inline which dictate either vertical or horizontal alignment. Another great benefit of using flexbox is that there is no longer an issue with collapsing containers and the need to use a clearfix solution.Frequently Asked Questions on CSS Float and Clear
What is the purpose of the float property in CSS?
The float property in CSS is used to push an element to the left or right, allowing other elements to wrap around it. It’s a powerful tool that can be used for creating entire web layouts or parts of a web page, such as wrapping text around images. However, it’s important to note that floating elements are removed from the normal flow of a web page, which can sometimes lead to unexpected layout results if not properly managed.
How can I center a floated element in CSS?
Centering a floated element in CSS can be a bit tricky because the float property itself does not support center alignment. However, there are several workarounds to achieve this. One common method is to use a wrapper or parent element with a specified width and the margin set to auto. Another method is to use flexbox or grid layout, which provide more control over alignment and distribution of space among items in a container.
What does the clear property do in CSS?
The clear property in CSS is used in conjunction with the float property. It specifies on which sides of an element floating elements are not allowed to float. The values for the clear property are none, left, right, both, and inherit. This property is often used to prevent elements from wrapping around a floated element.
Why are my floated elements not lining up correctly?
If your floated elements are not lining up as expected, it could be due to several reasons. One common issue is that the total width of the floated elements (including margins, padding, and borders) exceeds the width of their containing element. Another issue could be that the elements are not all floated in the same direction. Also, remember that floated elements are removed from the normal flow of the document, which can sometimes lead to unexpected results.
How can I clear floats in CSS?
Clearing floats in CSS can be done using the clear property. This is often necessary when you have floated elements within a container and you don’t want other elements in the container to wrap around the floated elements. You can clear floats by adding a new element at the end of the container with the clear property set to “both”. Alternatively, you can use a clearfix hack, which involves applying a pseudo-element with the clear property to the container itself.
Can I use the float property with flexbox or grid layout?
While you can technically use the float property with flexbox or grid layout, it’s generally not recommended. This is because flexbox and grid layout provide their own mechanisms for aligning and distributing space among items in a container, which can conflict with the behavior of the float property. If you’re using flexbox or grid layout, it’s usually better to use their alignment properties instead of float.
What are some alternatives to using the float property in CSS?
While the float property is a powerful tool in CSS, there are several alternatives that can provide more control and flexibility. These include flexbox, grid layout, and CSS positioning. Flexbox allows for easy alignment and distribution of space among items in a container, while grid layout is great for creating complex, two-dimensional layouts. CSS positioning can also be used to control the layout of individual elements.
How does the float property affect the flow of a document?
When an element is floated, it’s taken out of the normal flow of the document and shifted to the left or right as far as possible. Other elements in the document will then flow around the floated element. This can sometimes lead to unexpected results, especially if the floated element is wider than its containing element or if there are multiple floated elements with different widths.
Can I float an element to the center?
The float property in CSS does not support center alignment. It only allows elements to be floated to the left or right. However, you can achieve a similar effect by using a wrapper or parent element with a specified width and the margin set to auto. Alternatively, you can use flexbox or grid layout, which provide more control over alignment.
What happens if I don’t clear my floats?
If you don’t clear your floats, it can lead to unexpected layout results. For example, a parent element may collapse if it only contains floated elements, because floated elements are taken out of the normal flow of the document. Other elements in the document may also wrap around the floated elements in ways you didn’t intend. Therefore, it’s generally a good practice to clear your floats when necessary.
Guy RoutledgeFront-end dev and teacher at The General Assembly London. A to Z CSS Screencaster, Founder of sapling.digital and Co-founder of The Food Rush.
