The
float property specifies whether or not an element should float.
The
clear property is used to control the behavior of floating elements.The float Property
In its simplest use, the
float property can be used to wrap text around images.
The following example specifies that an image should float to the right in a text:
Example
img {
float: right;
margin: 0 0 10px 10px;}
The clear Property
The
clear property is used to control the behavior of floating elements.
Elements after a floating element will flow around it. To avoid this, use the
clear property.
The
clear property specifies on which sides of an element floating elements are not allowed to float (thuộc tính clear chỉ ra side nào của một element, mà các element khác không được float)Example
div {
clear: left;}
The clearfix Hack - overflow: auto;
If an element is taller than the element containing it, and it is floated, it will overflow outside of its container.
Then we can add
overflow: auto; to the containing element to fix this problem:Example
.clearfix {
overflow: auto;}
Web Layout Example
It is common to do entire web layouts using the
float property:Example
div {
border: 3px solid blue;}
.clearfix {
overflow: auto;}
nav {
float: left;
width: 200px;
border: 3px solid #73AD21;}
section {
margin-left: 206px;
border: 3px solid red;}
CSS Layout - float and clear
The
float property specifies whether or not an element should float.
The
clear property is used to control the behavior of floating elements.The float Property
In its simplest use, the
float property can be used to wrap text around images.
The following example specifies that an image should float to the right in a text:
Example
img {
float: right;
margin: 0 0 10px 10px;}
The clear Property
The
clear property is used to control the behavior of floating elements.
Elements after a floating element will flow around it. To avoid this, use the
clear property.
The
clear property specifies on which sides of an element floating elements are not allowed to float:Example
div {
clear: left;}
The clearfix Hack - overflow: auto;
If an element is taller than the element containing it, and it is floated, it will overflow outside of its container.
Then we can add
overflow: auto; to the containing element to fix this problem:Example
.clearfix {
overflow: auto;}
Web Layout Example
It is common to do entire web layouts using the
float property:Example
div {
border: 3px solid blue;}
.clearfix {
overflow: auto;}
nav {
float: left;
width: 200px;
border: 3px solid #73AD21;}
section {
margin-left: 206px;
border: 3px solid red;}
No comments:
Post a Comment