#CSS Float
In CSS, the float property is used to make an element float to the left or right, allowing text or other inline elements to wrap around it. It was originally used for text-image layouts but is now often used for layout purposes—although it has gradually been replaced by Flexbox and Grid.
Example:
<div style="width: 100px; height: 50px; background-color: blue; border: 1px solid red; float:left;">
float:left
</div>
<div style="width: 100px; height: 50px; background-color: blue; border: 1px solid red; float:right;">
float:right
</div>
<p>
In her panic, she found a cake labeled "Eat Me." This time, after eating it, Alice grew rapidly, so big that her head touched the ceiling.
She burst into tears, flooding the entire hall.
She absentmindedly picked up a fan, and her body shrank again—so small that she had to wade through her own tears.
Along the way, she encountered a swimming mouse.
Alice tried to strike up a conversation, but kept bringing up her pet cat Dinah—much to the displeasure of the mouse, who despised cats.
Her tears swept away other animals and birds. Soon, Alice was surrounded by a group of creatures.
They gathered on the shore, discussing how to dry themselves.
The mouse gave a long lecture on William the Conqueror, which Alice found terribly boring. The dodo then suggested a race where everyone runs in circles and there’s no winner.
Alice, still clueless, again mentioned her cat, which scared all the animals away.
</p>
float
float:leftfloat:rightIn her panic, she found a cake labeled "Eat Me." This time, after eating it, Alice grew rapidly, so big that her head touched the ceiling. She burst into tears, flooding the entire hall. She absentmindedly picked up a fan, and her body shrank again—so small that she had to wade through her own tears. Along the way, she encountered a swimming mouse. Alice tried to strike up a conversation, but kept bringing up her pet cat Dinah—much to the displeasure of the mouse, who despised cats. Her tears swept away other animals and birds. Soon, Alice was surrounded by a group of creatures. They gathered on the shore, discussing how to dry themselves. The mouse gave a long lecture on William the Conqueror, which Alice found terribly boring. The dodo then suggested a race where everyone runs in circles and there’s no winner. Alice, still clueless, again mentioned her cat, which scared all the animals away.
If you don’t want surrounding elements to wrap around a floated element, you need to use the clear property to clear the float:
<div style="width: 100px; height: 50px; background-color: blue; border: 1px solid red; float:left;">
float:left
</div>
<div style="width: 100px; height: 50px; background-color: blue; border: 1px solid red; float:right;">
float:right
</div>
<p style="clear:both;">
In her panic, she found a cake labeled "Eat Me." This time, after eating it, Alice grew rapidly, so big that her head touched the ceiling.
She burst into tears, flooding the entire hall.
She absentmindedly picked up a fan, and her body shrank again—so small that she had to wade through her own tears.
Along the way, she encountered a swimming mouse.
Alice tried to strike up a conversation, but kept bringing up her pet cat Dinah—much to the displeasure of the mouse, who despised cats.
Her tears swept away other animals and birds. Soon, Alice was surrounded by a group of creatures.
They gathered on the shore, discussing how to dry themselves.
The mouse gave a long lecture on William the Conqueror, which Alice found terribly boring. The dodo then suggested a race where everyone runs in circles and there’s no winner.
Alice, still clueless, again mentioned her cat, which scared all the animals away.
</p>
clear
float:leftfloat:rightIn her panic, she found a cake labeled "Eat Me." This time, after eating it, Alice grew rapidly, so big that her head touched the ceiling. She burst into tears, flooding the entire hall. She absentmindedly picked up a fan, and her body shrank again—so small that she had to wade through her own tears. Along the way, she encountered a swimming mouse. Alice tried to strike up a conversation, but kept bringing up her pet cat Dinah—much to the displeasure of the mouse, who despised cats. Her tears swept away other animals and birds. Soon, Alice was surrounded by a group of creatures. They gathered on the shore, discussing how to dry themselves. The mouse gave a long lecture on William the Conqueror, which Alice found terribly boring. The dodo then suggested a race where everyone runs in circles and there’s no winner. Alice, still clueless, again mentioned her cat, which scared all the animals away.