CSS Float

안녕 모두들
Activity:
R

ER
Activity:

OVERFLOW
Activity:
Y

SIS T
Activity:

FLOAT
Activity:
IP

MT R
Activity:

CLEAR
CSS Float

The CSS float property specifies how

an element should float
The CSS clear property specifies
what elements can float beside the
cleared element and on which side.
The Float Property
The float property is used for
positioning and formatting content
e.g. let an image float left to the text
in a container.
The float property can have one of
the following values:
• left - The element floats to
the left of its container
• right - The element floats
to the right of its container
• none - The element does
not float (will be displayed
just where it occurs in the
text)
 • inherit - The element inherits the
float value of its parent
<style>
img {
float: right;
}
</style>
The Clear Property
The clear property specifies what
elements can float beside the
cleared element and on which side.

The clear property can have one of

the following values:
• none - Allows floating elements
on both sides. This is default
• left - No floating elements
allowed on the left side
• right- No floating elements
allowed on the right side
• both - No floating elements
allowed on either the left or the
right side
• inherit - The element inherits
the clear value of its parent
When clearing floats, you should match
the clear to the float
div {
clear: left;
}
The Clearfix Hack
If an element is taller than the
element containing it, and it is
floated, it will "overflow" outside
of its container:
 .clearfix::after {
.clearfix { content: "";
overflow: auto clear: both;
; display: table;
} }
 Grid of Boxes/
Equal Width Boxes
With the float property, it is easy
to float boxes of content side by
side:
*{
box-sizing: border-box;
}

.box {
float: left;
width: 33.33%;
padding: 50px;
}
Images Side By Side
.img-container {
float: left;
width: 33.33%;
padding: 5px;
}
Equal Height Boxes
.box {
height: 500px;
}
this is not very flexible
use flexbox to create flexible
box
Navigation Menu
 li {
<style> float: left; li a:hover {
ul { } background-
list-style-type: li a { color: #111;
none; display: inline-block; }
margin: 0; color: white;
padding: 0; text-align: center; .active {
overflow: padding: 14px 16px; background-
hidden; text-decoration: color: red;
background- none; }
color: #333; } </style>
}
Web Layout
Example
.column {
float: left;
padding: 15px;
}

.clearfix::after {
content: "";
clear: both;
display: table;
}
PROPERTY
THANK YOU FOR
LISTENING!
들어 주셔서 감사합니다