CSS float floating element

 CSS float is used to define the float of the block. It can be set to float to the left or float to the right. Common usages include special effects of text around pictures or DIV block layout. In CSS design, any element can be floated. , Such as DIV block, span , picture ... etc. Maybe you often see such layouts. The lavender part can be pictures, videos, or other things you want to put. To create the effect of pictures with text content around, you can use CSS float syntax, this example Float:left is used, that is, the lavender block floats to the left, and other text is displayed next to the lavender block. When the amount of text exceeds the height of the lavender block, it will automatically run to the bottom of the block and continue to be presented .

Please note that this effect floats lavender blocks instead of text, so the css float syntax should be used in lavender blocks. The text is only displayed around the lavender blocks because of the floating of the lavender blocks. Then we come Look at the basic syntax of css float, and then look at how to write it in practical applications.

CSS float float syntax

float: floating direction;

The available values ​​of CSS float floating direction are left (floating to the left), right (floating to the right), none (default value, that is, no floating), and inherit (inherited from the properties of the parent layer), remind you of the last one Do not use inherit as much as possible to avoid situations that IE does not support.

CSS float float syntax example

<style type="text/css">
#BigDiv{
　width:500px;
　height:190px;
　font-size:13px;
　color:#333333;
　line-height:22px;
}
#FloatDiv{
　width:200px;
　height:120px;
　background-color:#DBABFF;
　margin-right:10px;
　float:left;
}
</style>
<div id="BigDiv">
　<div id="FloatDiv"></div>
　Text floating around pictures, text Pictures floating around, pictures floating around text, pictures floating around text...
</div>

The result of this grammar presentation will be like the "text around floating lavender block example" at the beginning of this article. In order to make the example grammar more concise, we omitted some of the traditional Chinese "text around floating picture" text volume, Several commonly used CSS syntaxes are used. For example, width and height respectively represent the width and height of the DIV block, the unit is px, the font-size block is the size of the text, the color is the text color, and the background-color is Is the background color of the DIV block.

The grammatical structure of the entire example is very simple. There are two DIV blocks. The outermost large DIV block id is BigDiv, which contains a floating DIV block whose id is FloatDiv and a traditional Chinese character string. The most important thing is The FloatDiv block uses the "float:left;" grammar marked in red to let the browser know that this block should float on the left, and other text in the BigDiv block does not need to be wrapped in DIV , it will It appears naturally around the FloatDiv block.