CSS Float
What is CSS Float?
CSS Float will move the element to the left or right, and the surrounding elements will also be rearranged.
Float (float) is often used for images, but it is also very useful in layout.
How elements float
The elements float horizontally, which means that the elements can only move left and right but not up and down.
A floating element will try to move left or right until its outer edge touches the border of the containing box or another floating box.
Elements after the floated element will surround it.
Elements before the floated element will not be affected.
CSS float floating attribute
This article mainly introduces the float attribute: defining the direction in which the element floats.
1. Page layout method: Introducing document flow, floating layer and float attribute.
2. float:left: Introducing the layout method when float is left.
3. float:right: Introducing the layout method when float is right.
4. Adjacent elements contain float attributes: Introducing the layout method when adjacent elements contain float attributes.
1. Page layout method
Page layout method mainly includes: document flow, floating layer, and float attributes.
1.1 Document flow
The standard document flow (default layout) of an HTML page is: from top to bottom, from left to right, with line breaks when encountering blocks (block-level elements).
1.2 Floating layer
Floating layer: After assigning a value to the float attribute of the element, it is separated from the document flow and floats left and right, close to the left and right borders of the parent element (default is the body text area) .
The floating element is filled in by subsequent (non-floating) elements in the vacated position of the document flow: block-level elements are filled directly. If it overlaps with the range of the floating element, the floating element covers the block-level element. element. Inline elements: Insert them if there is any space.
1.3 Introduction to float attribute
① left: The element floats to the left.
② right: The element floats to the right.
③ none: Default value.
④ inherit: Inherit the float attribute from the parent element.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>2.3-float属性</title>
<style type="text/css">
#a
{
background-color:Red;
height:50px;
width:100px;
}
#b
{
background-color:Yellow;
height:50px;
width:200px;
}
#c
{
background-color:Blue;
height:50px;
width:300px;
}
#d
{
background-color:Gray;
height:50px;
width:400px;
}
</style>
</head>
<body>
<div id=a >div-a</div>
<div id=b>div-b</div>
<div id=c>div-c</div>
<input type="text" value="input1" />
<input type="text" value="input2" />
<input type="text" value="input3 " />
<div id=d>div-d</div>
<input type="text" value="input4 " />
</body>
</html>
Next Section