Making sense of Floats Flashcards
What does float do?
A float pulls an element (often an image) to one side of its container, allowing the document flow to wrap around it. This layout is common in newspapers and magazines, so floats were added to CSS to achieve this effect.
Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.
What is the double container pattern?
This layout is common for centering content on a page. You can achieve it by placing your content inside two nested containers and then set margins on the inner container to position it within the outer one. Web developer Brad Westfall calls this the double container pattern.
It is usually used using
< body> . . . < / body>
as the outer container, which by default is already 100% of the page width, so you won’t have to apply any new styles to it. Inside that, you wrap the entire contents of the page in a
< div> . . . < / div>
, which serves as the inner container. To that you’ll apply a max-width and auto margins to center the contents.
.container {
max-width: 1080px;
margin: 0 auto;
}
By using max-width instead of width, the element shrinks to below 1080px if the screen’s viewport is smaller than that. That is to say, in smaller viewports, the inner container will fill the screen, but on larger ones, it’ll expand to 1080px. This is important to avoid horizontal scrolling on devices with smaller screens.
Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.
What is the height of a block elements that only contains floated elements inside?
Cero, because unlike elements in the normal document flow, floated elements do not add height to their parent elements.
This may seem odd, but it goes back to the original purpose of floats. Floats are intended to allow text to wrap around them. When you float an image inside a paragraph, the paragraph does not grow to contain the image. This means, if the image is taller than the text of the paragraph, the next paragraph will start immediately below the text of the first, and the text in both paragraphs will wrap around the float.
Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.
What does clear: both declaration do?
Causes the element to move below the bottom of floated elements, rather than beside them. You can give this property the value left or right to clear only elements floated to the left or right, respectively.
Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.
What is a pseudo-element?
Pseudo-element - Special selectors that target certain parts of the document. These begin with a double-colon (::) syntax, though most browsers also support a single-colon syntax for backward compatibility. The most common pseudo-elements are ::before and :after, which are used to insert content at the beginning or end of an element.
Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.
What is a clearfix?
The clearfix, for those unaware, is a CSS hack that solves a behavior that occurs when two floated elements are stacked next to each other. When elements are aligned this way, the parent container ends up with a height of 0, and it can easily wreak havoc on a layout.
NOTE: it is not a bug but the desired behaviour of the original purpose of floats. Left as is for the correctness of the quote.
Source css-tricks
What is the “problem” with this clearfix ruleset?
.clearfix::after {
display: block;
content: " ";
clear: both;
}
One inconsistency with this clearfix remains: Margins of floated elements inside won’t collapse to the outside of the clear fixed container; but, margins of non-floated elements will collapse as normal. Some developers prefer to use a modified version of the clearfix that will contain all margins because it can be slightly more predictable.
.clearfix::before,
.clearfix::after {
display: table;
content: " ";
}
.clearfix::after {
clear: both;
}
This version makes use of display: table rather than display: block. By applying this to both the ::before and ::after pseudo-elements, you’ll contain any child elements’ margins at both the top and bottom of the container.
Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.
What is the future of the clearfix?
These days, almost 15 years after it was first proposed, the clearfix is losing a bit of relevance. CSS Grid and Flexbox are filling in the gaps for advanced layout on the web. In January of 2017, Rachel Andrew wrote an article for her blog titled “The end of the clearfix hack?” In it, she describes a way to replace the clearfix hack with a single line of code using a new display mode rule known as flow-root.
.container {
display: flow-root;
}
Source css-tricks
What does display: flow-root do?
“The element generates a block container box, and lays out its contents using flow layout. It always establishes a new block formatting context for its contents.”
The key use of this comes when you have a box with a floated element inside it, and the floated element is taller than the other content inside the box. Default behaviour is that the box will not clear the float, and anything that comes afterwards will also wrap the floated item. The floated element is out of flow causing the box to collapse. The typical way we have solved this issue is to use a clearfix hack.
Using display: flow-root on an element will perform this clearing for us. Instead of needing to apply the clearfix hack we can use the CSS display property on the container with a value of flow-root.
.container {
display: flow-root;
}
The border then clears the float and following content displays after our contained floated element.
NOTE: support is limited to modern browsers. Check caniuse before using it.
Source rachelandrew.co.uk
What is a Block Formatting Context (BFC)?
Everything on a page is part of a formatting context, or an area which has been defined to lay out content in a particular way. A block formatting context (BFC) will lay child elements out according to block layout rules, a flex formatting context will lay its children out as flex items, etc. Each formatting context has specific rules about how layout behaves when in that context.
Source MDN
What are the properties of a Block Formatting Context (BFC)?
A block formatting context (sometimes called a BFC) is a region of the page in which elements are laid out. A block formatting context itself is part of the surrounding document flow, but it isolates its contents from the outside context. This isolation does three things for the element that establishes the BFC:
- It contains the top and bottom margins of all elements within it. They won’t collapse with margins of elements outside of the block formatting context.
- It contains all floated elements within it.
- It doesn’t overlap with floated elements outside the BFC.
Put simply, the contents inside a block formatting context will not overlap or interact with elements on the outside as you would normally expect. If you apply clear to an element, it’ll only clear floats within its own BFC. And, if you force an element to have a new BFC, it won’t overlap with other BFCs.
Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.
How can you create a Block Formatting Context (BFC)?
Any block-level element can be made to create a BFC by the application of certain CSS properties.
A new BFC is created in the following situations:
- elements made to float using
float - absolutely positioned elements
- elements with
display: inline-block - table cells or elements with
display: table-cell, including anonymous table cells created when using thedisplay: table-\*properties - table captions or elements with
display: table-caption - block elements where
overflowhas a value other thanvisible - elements with
display: flow-rootordisplay: flow-root list-item - elements with
contain: layout,content, orstrict - flex items
- grid items
- multicol containers
- elements with
column-spanset toall
Source MDN
Can you describe the media object pattern by Nicolle Sullivan?
The media object is an image to the left, with descriptive content to the right. The content area on the right can contain any other objects. Text, lists, grids, or even other media objects inside.
Implementation details with flex
The HTML:
<div class=block">
<img src="https://picsum.photos/200/200/" alt="random"/>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi voluptate iure nostrum debitis quae nihil, id fugiat consequatur quo, laborum, non eligendi dolore expedita minima voluptates repudiandae</p>
</div>
</div>
The CSS:
.block {
display: flex;
align-items: flex-start;
padding: 1rem;
}
.block > img {
margin: 0 1rem 0 0;
/* Below styles are optional. They will ensure all media object images have the same img and the aspect ration of the img will be preserved */
width: 5rem;
height: 5rem;
object-fit: cover;
}
.block > div {
flex: 1;
}
Source www.stubbornella.org & css-tricks
What are the css hacks to target old versions of IE?
The property CSS “hacks” used to target specific versions of Internet Explorer.
Property hacks
selector {
property: value; /* all browsers */
property: value\9; /* < IE9 */
*property: value; /* < IE8 */
_property: value; /* < IE7 */
}
Conditional stylesheets
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css"> <!--[if IE 7]><link rel="stylesheet" type="text/css" media="screen" href="css/ie7.css" \> <![endif]--> <!--[if IE 6]><link rel="stylesheet" type="text/css" media="screen" href="css/ie6.css" \> <![endif]-->
Generally speaking you should avoid CSS hacks in favor of conditional classes on HTML.
Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.
Define a simple 12 column float grid system
The HTML:
<div class="row"> <div class="column-1" \>1 column\</div> <div class="column-1" \>1 column\</div> <div class="column-1" \>1 column\</div> <div class="column-1" \>1 column\</div> <div class="column-1" \>1 column\</div> <div class="column-1" \>1 column\</div> <div class="column-2" \>2 column\</div> <div class="column-2" \>2 column\</div> <div class="column-2" \>2 column\</div> </div> <div class="row"> <div class="column-4" \>4 column\</div> <div class="column-8" \>8 column\</div> </div>
The CSS:
.row::after {
content: " ";
display: block;
clear: both;
}
/* Targets all elements with a class attribute that includes “column-” */
[class\="column-"] {
float: left;
}
.column-1 { width: 8.3333%; } /* 1/12 */
.column-2 { width: 16.6667%; } /* 2/12 */
.column-3 { width: 25%; } /* 3/12, and so on . . . */
.column-4 { width: 33.3333%; }
.column-5 { width: 41.6667%; }
.column-6 { width: 50%; }
.column-7 { width: 58.3333%; }
.column-8 { width: 66.6667%; }
.column-9 { width: 75%; }
.column-10 { width: 83.3333%; }
.column-11 { width: 91.6667% }
.column-12 { width: 100%; }
NOTE: The attribute selector ( [class*="column-"] ) casts a wider net than you’ll need, as it also targets something like a <div class="column-header" >. It’d be best to consider “column” in a class name as a sort of reserved word from here on out so you don’t collide with these rules.
One thing the grid system still lacks is a gutter between each column. You can create gutters by adding left and right padding to each grid column. By adding this to the grid system instead of individual components, you’ll be able to re-use the grid over and over on other pages without worrying about gutters again.
[class\="column-"] {
float: left;
/* Adds .75 em left and right padding to each column element */
padding: 0 0.75em;
margin-top: 0; /* Removes top margins from columns */
}
The extra padding in the columns would misalign by 0.75 em with the rest of the content You could solve this issue by stretching the rows on the sides
.row {
margin-left: -0.75em;
margin-right: -0.75em;
}
Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.
