Home > Article > Web Front-end > What are the floating attribute values in css
What are the floating attribute values in css
- 王林Original
- 2021-02-24 16:28:355123browse
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.
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 ##inherit
- float Specifies whether a box (element) can float.
- left
- right
- ##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>Running result:
CSS tutorial
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!