HTML5 and CSS

Using Float and Clear

Float: left, right, or none;

Clear Techniques:

• .clearfix {overflow: auto;} for container.
• .clearfix::after {content: “”; clear: both; display: table;} for container.
• .clear {clear: both;} for <br> before the container closing tag

Using Display flex

• .flex {display: flex;} for container.
  • Notice that all elements inside container is aligned top left to the container beside each other.
  • Also they stretch to fill the container height unless you assign a height for each element.
• Use {justify-content: } to align elements horizontal (flex-start, flex-end, center, space-around, space-evenly and space-between).
• Use {align-items: } to align elements vertically (flex-start, flex-end, and center).
• Use {gap:} to set the space between items manual.
• {flex-basis:}
• {flex-grow:}
• {flex-shrink:}
• {flex:}
• {order:}
• {flex-direction: ;}
• {flex-wrap:}
• {flex-flow:}

Using Display grid

• .grid {display: grid;} for container.
  • Notice nothing happened because in grid you have to define columns.
• Use {grid-template-columns: } to define columns using fr.
• Use {align-items: } to align elements vertically (start, end, and center).
• Use {gap:} to set the space between items manual.