CSS Float(floating)

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>

Continuing Learning

new file

<!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>

submit Reset Code

Automatic operation

CSS Float(floating)

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]