CSS floating writing method

This chapter mainly records the commonly used positioning and floating.

1. Floating

Speaking of floating, we must first talk about standard streams and floating streams.

1. Standard stream

The standard stream is very common, and the default method of the browser is the standard stream.
How to understand standard stream?
To implement we need to know the three element classifications in CSS.

Inline elements, block-level elements, inline block-level elements

##Inline elementsBlock-level elementsInline block-level elementsNot exclusive on one lineExclusive one lineNot exclusive on one lineThe default is the same width as the contentThe default is the same width as the parent elementThe default is the same width as the contentCannot be set Width and heightYou can set the width and heightYou can set the width and heightThe difference between the three elements can be roughly distinguished.

Insert another knowledge point here:
In HTML, elements (tags) are usually divided into two categories:

Container-level tagsText level tag##p h ul ol li dt etc.All other tags can be nestedNow we can talk about the standard flow ：

span/p/em/ins etc.
Only text/pictures/hyperlinks can be nested

There are two formatting methods in the standard flow. Block-level elements are formatted vertically, and inline elements and inline block-level elements are formatted horizontally. Follow the instructions

2. Floating flow

Float properties:

clearleft/rightboth/noneThere are several points to note about floating:

clear	float	float
Left/right floating is not allowed	left/right	Left floating/right floating
Neither/None clear	none	Not floating

Floating refers to how the element after setting the float will float around it! ! !

For example, right means that the following elements will be arranged to his left! ! !

Floating flow does not distinguish what element it is. It can only be typed horizontally, without centering (center), and margin: 0 auto cannot be used; both width and height can be set.

Features#If the previous one floats and the next one does not float, then the previous one will be covered For the latter one (the text will not cover it, but will surround it), here you can try to think of a floating arrangement. The one that floats first will be in front, and the one that floats later will be in the back.The position after the float is determined by the position in the standard stream before the float. To determine, the main thing here is to understand what elements will be affected after floating The left float will look for the left float, and the right float will follow the right floatWhen the width of the parent element can display all floats, display them side by sideThe sticking of floats mainly means that when the width of the parent element is not enough, it will lean forward. How to understand it? , that is, if you put a lot of pictures in a window and reduce the width of the window, the pictures will automatically be arranged downwards

The above is the detailed content of CSS floating writing method. For more information, please follow other related articles on the PHP Chinese website!