• Hajipur, Bihar, 844101

☰
❮
❯

CSS

CSS Basics

CSS Styling Properties

CSS Advanced Selectors & Features

CSS Media and Image Styling

CSS Layout Techniques

CSS Flexbox

CSS Grid

CSS Responsive Design (RWD)

CSS Float

← Previous Next →

🔹 What is float in CSS?

The float property in CSS is used to position elements to the left or right of their container, allowing text or inline elements to wrap around them.

Originally designed for images, float is also used to create layouts (though now replaced by Flexbox/Grid).

🔸 Syntax

element {
  float: left | right | none | inherit;
}

Values:

Value Description
left Element floats to the left
right Element floats to the right
none Default. Element does not float
inherit Inherits the float value from its parent
🔸 Example: Float Left
<img src="image.jpg" class="float-left" alt="sample image">
<p>This text wraps around the floated image.</p>

.float-left {
  float: left;
  margin-right: 10px;
}

🟢 The image floats to the left, and the text wraps around it.

🔸 Example: Float Right
<img src="image.jpg" class="float-right">
<p>This text wraps around the image on the left side.</p>

.float-right {
  float: right;
  margin-left: 10px;
}

🟢 The image floats to the right, and the text flows on the left.

🔸 Clearing Floats

Floated elements are removed from normal flow, so parent elements often collapse in height.
Use clear or clearfix to fix layout issues.

🔹 Example with clear
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

Apply this class to the parent container of floated items.

🔸 Float vs Flexbox

Feature Float Flexbox
Layout use Old, basic layouts Modern, responsive layouts
Wrapping Yes Yes
Alignment Difficult Easy (center, space-between)
Direction Horizontal only Both directions

✅ Use Flexbox/Grid for modern layouts.
Use float mainly for text wrapping or simple layouts.

🟠 Common Use Cases

  • Wrapping text around images

  • Creating sidebars

  • Floating buttons to right/left

  • Basic grid-like structures

Practice Questions

Q1. Float an image to the left with 15px right margin.

Q2. Float an ad banner to the right in a webpage.

Q3. Float two <div>s side by side using float: left.

Q4. Add a clearfix to fix a container with floated children.

Q5. Float a button to the right in a header.

Q6. Stop the float effect from affecting the next paragraph.

Q7. Make an image float left and text wrap around.

Q8. Float a box to the right and apply background color.

Q9. Create a container with two floated columns.

Q10. Use clear: both; to start a new section under floated elements.

CSS Float Quiz

Q1: What does float: left; do?

A. Moves element out of container
B. Floats element to left side
C. Makes it sticky
D. Adds padding

Q2: Which property removes float effect?

A. clear
B. break
C. display
D. overflow

Q3: What’s the default value of float?

A. left
B. right
C. none
D. inherit

Q4: What happens if you float all child elements in a container?

A. Container increases height
B. Container collapses
C. Container scrolls
D. Container disappears

Q5: How do you fix a collapsing parent due to floated children?

A. Add margin
B. Use clearfix
C. Use flex
D. Float parent

Q6: Which value aligns element to right using float?

A. float: top;
B. float: center;
C. float: right;
D. position: right;

Q7: Which of these allows wrapping text around image?

A. float
B. position
C. z-index
D. margin

Q8: What’s a common side effect of using float?

A. Elements overlap
B. Parent height collapse
C. Text disappears
D. Font changes

Q9: Which tag helps prevent float from affecting next element?

A. clear
B. overflow
C. z-index
D. float: none

Q10: What does clear: both; do?

A. Adds a border
B. Resets float value
C. Stops elements from sitting beside floated elements
D. Aligns text
← Previous Next →
Login
Go Back Top