Float, Flexbox, Grid, Bootstrap, CSS, Less, SASS

 Float  Flexbox Grid Bootstrap

Tables as layout ??? ---- Very Bad - Very Primitive

Next Option was ::Float::
Images /text - Float was originally designed for text to be wrapped around image

img  {
  float: left_Which side it goes
  clear : which_Side_They are not allowed
}

//h1 in general
h1 {
}

//h1 Nested inside div
div h1{
}

.greet , .welcome .{
font: ;
    color : black;
margin-
}

float when applied to div inside a section becomes responsive kind of 
and we get a layout, You also need holding Container 1st which will contain all div's.

<section>
<div> clear:both  ---- Top
<div> float: left   ---- Left
<div> float: none ---- Centre
<div> float:right  ---- Right
<div> clear:both  ---- Footer
<section>

Float Clear --> Flawed Logic  --> Hackish

https://sabe.io/classes/css/grouping-nesting-selectors
https://medium.com/actualize-network/modern-css-explained-for-dinosaurs-5226febe3525
https://www.youtube.com/watch?v=R7gqJkdc5dM
https://codepen.io/kevinpowell/pen/gzZpGL/

-------------------------------------------------------------

Multiple classes on 1 element in Html attribute - space separated - Inside HTML

Inside .css File
Define Multiple Class  - Comma Separated - All styles shared by multiple classes
Nested Class - Space separated
Pseudo Classes  ??? ::after ?
Selectors ???
Less SASS CSS ???  

https://medium.com/@saanstone/understanding-css-precedence-specificity-d8ca24712417

https://stackoverflow.com/questions/25105736/what-is-the-order-of-precedence-for-css

https://www.w3schools.com/css/css_combinators.asp

Descendant vs Child Selector