<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1"
>
<
link
rel
=
"stylesheet"
href="
">
<
script
src="
"></
script
>
<
script
src="
"></
script
>
<
script
src="
"></
script
>
</
head
>
<
body
>
<
div
class
=
"container-fluid p-5"
>
<
h1
class
=
"text-success font-weight-bold text-center"
>
GeeksforGeeks</
h1
>
<
span
class
=
"font-weight-bolder"
>
H1 & H2 Without float
</
span
>
<
div
class
=
"border bg-primary text-white"
>
<
h1
class
=
""
>H1 Without Float left</
h1
>
<
h2
class
=
""
>H2 Without Float left</
h2
>
</
div
>
<
span
class
=
"font-weight-bolder"
>With float</
span
>
<
div
class
=
"border bg-danger clearfix text-white"
>
<
h1
class
=
"float-left "
>H1 Float left</
h1
>
<
br
>
<
h2
class
=
"float-left "
>H2 Float left</
h2
>
</
div
>
<
span
class
=
"font-weight-bolder"
>
Using clearfix with float
</
span
>
<
div
class
=
"border bg-success text-white"
>
<
span
class
=
"clearfix"
>
<
h1
class
=
"float-left"
>H1 Float left</
h1
>
</
span
>
<
span
class
=
"clearfix"
>
<
h2
class
=
"float-left"
>H2 Float left</
h2
>
</
span
>
</
div
>
<
span
class
=
"font-weight-bolder"
>
Wrapped by flex with float
</
span
>
<
div
class
=
"border bg-success text-white d-flex flex-column"
>
<
h1
class
=
"float-left "
>H1 Float left</
h1
>
<
br
>
<
h2
class
=
"float-left "
>H2 Float left</
h2
>
</
div
>
</
div
>
</
body
>
</
html
>