What are the floating attribute values in css-CSS Tutorial-php.cn

What are the floating attribute values in css

王林

Release： 2023-01-03 09:25:09

Original

5122 people have browsed it

The floating attribute values in CSS are: left, right, none, inherit. The float attribute can move an element to the left or right, and its surrounding elements will also be rearranged. It is often used in image layout.

What are the floating attribute values in css

The operating environment of this article: windows10 system, css 3, thinkpad t480 computer.

Introduction to floating properties:

CSS's Float will move elements to the left or right, and the surrounding elements will also be rearranged. Float is often used for images, but it is also very useful in layout.

Floating attribute:

clear Specifies that floating elements are not allowed around the element (clear floating).

left
right
##both
none

##none
inherit
Example:

<style>
.thumbnail 
{
	float:left;
	width:110px;
	height:90px;
	margin:5px;
}
</style>
</head>

<body>
<h3>图片库</h3>
<p>试着调整窗口,看看当图片没有足够的空间会发生什么。</p>
<img  class="thumbnail" src="/images/klematis_small.jpg"    style="max-width:90%"  style="max-width:90%" alt="What are the floating attribute values in css" >
<img  class="thumbnail" src="/images/klematis2_small.jpg"    style="max-width:90%"  style="max-width:90%" alt="What are the floating attribute values in css" >
<img  class="thumbnail" src="/images/klematis3_small.jpg"    style="max-width:90%"  style="max-width:90%" alt="What are the floating attribute values in css" >
<img  class="thumbnail" src="/images/klematis4_small.jpg"    style="max-width:90%"  style="max-width:90%" alt="What are the floating attribute values in css" >
<img  class="thumbnail" src="/images/klematis_small.jpg"    style="max-width:90%"  style="max-width:90%" alt="What are the floating attribute values in css" >
<img  class="thumbnail" src="/images/klematis2_small.jpg"    style="max-width:90%"  style="max-width:90%" alt="What are the floating attribute values in css" >
<img  class="thumbnail" src="/images/klematis3_small.jpg"    style="max-width:90%"  style="max-width:90%" alt="What are the floating attribute values in css" >
<img  class="thumbnail" src="/images/klematis4_small.jpg"    style="max-width:90%"  style="max-width:90%" alt="What are the floating attribute values in css" >
</body>
</html>

Copy after login

Running result:

What are the floating attribute values in css

##Related recommendations:

CSS tutorial What are the floating attribute values in css

The above is the detailed content of What are the floating attribute values in css. For more information, please follow other related articles on the PHP Chinese website!

What are the floating attribute values ​​​​in css

What are the floating attribute values in css