CSS中float属性怎么使用

2024-01-17 15:52 小编
 我们来看float的具体使用方法
 
  float属性描述如下
 
  float:值;
 
  值的部分有以下几个
 
  none:不指定元素的位置。(初始值)
 
  left:把元素移到左边。
 
  right:把元素移到右边。
 
  另外,如果值是inherit的话,会继承父元素float的值
 
  如果在同一元素中设置了position属性的初始值(static)以外的值的话,就不能使用float属性。
 
  如果要将float属性应用于块元素的话,必须先设置width属性的宽度。
 
  如果想清除floate属性的话,在clear属性中输入相同值(比如float输入left就输入left、float输入right就输入right)。另外,clear输入both的值的话,两边都可以清除。
 
  下面我们来看float属性应用的具体示例
 
  首先我们来看float:left;
 
  在宽度为170px,高度为100px的盒子中设置图像和文字,在图像上设置float属性为left时的例子。
 
  代码如下:
 
  HTML代码
 
  <!DOCTYPEhtml>
 
  <html>
 
  <head>
 
  <metacharset="utf-8">
 
  <linkrel="stylesheet"type="text/css"href="sample.css">
 
  </head>
 
  <body>
 
  <pclass="content1"><imgsrc="img/mouse.png"alt="图像"style="width:45px;height:45px">
 
  在图像上使用float:left的例子:文字在右侧显示,剩下部分的文字在图像的下面被显示</p>
 
  </body>
 
  </html>
 
  CSS代码
 
  p.content1{background-color:#b0e0e6;width:170px;height:100px;}
 
  img{float:left;}

image.png

Tag: 怎么
在线咨询 拨打电话

电话

13363039260

微信二维码

微信二维码