Added clearfix (#25214)

Added clearfix for parent elements.
This commit is contained in:
JKarlavige
2018-12-12 21:46:46 -05:00
committed by Tom
parent 9f1fc32cf4
commit 9b444806fc

View File

@ -70,6 +70,17 @@ div {
![clear footer image](https://github.com/jamal-pb95/guides/blob/master/assets/clearedfooter.png "clear footer image")
Source: CSS-TRICS
### Clearfix
If you float two child elements within a parent container, the parent requires a clearfix to wrap around both elements. Without a clearfix, the parent is unable to clear its child elements.
```
div:after {
clear: both;
display: table;
content: "";
}
```
Source: CSS TRICKS (https://css-tricks.com/snippets/css/clear-fix/)
### Additional Resources:
- MDN CSS: [Float](https://developer.mozilla.org/en-US/docs/Web/CSS/float) & [Clear](https://developer.mozilla.org/en-US/docs/Web/CSS/clear)
- [W3Schools tutorials](https://www.w3schools.com/css/css_float.asp)