SyntaxShelf

Float

2 snippets across 2 stacks - HTML & CSS, Python

HCHTML & CSS

Float & Clear

HC · Layout & Positioning
Syntax
float: left | right | none;
clear: left | right | both;
Example
/* Classic text wrapping around an image */
.article-image {
  float: left;
  margin: 0 16px 16px 0;
  max-width: 40%;
}

/* Clear floats */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

Note Floats were once used for page layouts but flexbox and grid have replaced that use case. Floats are still useful for wrapping text around images. Use the clearfix hack or display: flow-root on the parent to contain floated children.

PYPython

Integers & Floats

PY · Numbers
Syntax
x = 42      # int
y = 3.14    # float
Example
count = 1_000_000
ratio = 0.618
print(type(count), type(ratio))
print(count + ratio)
Output
<class 'int'> <class 'float'>
1000000.618

Note Underscores in numeric literals are ignored and serve as visual separators. Python ints have unlimited precision.

Frequently asked questions

How does HTML & CSS handle float?
This task is covered in 2 stacks on this page: HTML & CSS, Python. The "Float & Clear" snippet in HTML & CSS uses `float: left | right | none;`.
Which code does the HTML & CSS example use?
The "Float & Clear" snippet uses `float: left | right | none;`, from the Layout & Positioning section of the HTML & CSS cheat sheet.
Which stacks cover "float" on this page?
HTML & CSS, Python. Together they hold 2 copy-ready snippets for this task.
Is there anything to watch out for?
Yes. For "Float & Clear": Floats were once used for page layouts but flexbox and grid have replaced that use case. Floats are still useful for wrapping text around images. Use the clearfix hack or display: flow-root on the parent to contain floated children.

Browse all tasks by intent