css布局基础:浮动和清除浮动练习1

主要知识点:

1、浮动:让元素脱离标准流,从而实现灵活的布局效果。

2、浮动只能左右,不能上下。float:left/right/none。

3、子元素浮动会造成父元素高度塌陷,清除浮动的3种方法:

  • 方法1:通过overflow属性
  • 方法2:通过clear属性
  • 方法3:通过伪元素选择器(推荐)

效果图:

文字环绕图片效果图

参考:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>css布局基础:浮动和清除浮动练习1|www.125jz.com</title>
  <style>
   .one img {
    width: 100px;
    height: 100px;
    float: left;
   }

   .two img {
    width: 100px;
    height: 100px;
    float: right;
   }
  </style>
 </head>
 <body>
  <div class="one">
   <img src="img/03-03.jpg" />
   <p>超文本标记语言,标准通用标记语言下的一个应用。
    “超文本”就是指页面内可以包含图片、链接,甚至音乐
    、程序等非文字元素。 超文本标记语言的结构包括“头”部分
    (英语:Head)、和“主体”部分(英语:Body),其中“头”
    部提供关于网页的信息,“主体”部分提供网页的具体内容。
    超文本标记语言,标准通用标记语言下的一个应用。
   </p>
  </div>
  <div class="two">
   <img src="img/03-03.jpg" />
   <p>超文本标记语言,标准通用标记语言下的一个应用。
    “超文本”就是指页面内可以包含图片、链接,甚至音乐
    、程序等非文字元素。 超文本标记语言的结构包括“头”部分
    (英语:Head)、和“主体”部分(英语:Body),其中“头”
    部提供关于网页的信息,“主体”部分提供网页的具体内容。
    超文本标记语言,标准通用标记语言下的一个应用。
   </p>
  </div>
 </body>
</html>
  • 说明:浮动元素脱离标准流,但不脱离文本流,后面的文本将围绕它。

本文来自投稿,不代表125jz立场,如若转载,请注明出处:http://www.125jz.com/5531.html

(0)
孙萍的头像孙萍管理团队
上一篇 2020年4月4日 上午8:22
下一篇 2020年4月4日 上午8:41

99%的人还看了以下文章

  • 第6课:超链接

    CSS允许你根据链接是未访问的、已访问的、活动的、是否有鼠标悬停等分别定义不同的属性。这样,我们便可为网站增添奇特而有用的效果。

    2020年2月22日
    2.1K0
  • 第15课:用z-index进行层次堆叠

    CSS可以处理高度、宽度、深度三个维度。在前面的课程中,我们已经了解了前两个维度。在本课中,我们将学习如何令不同元素具有层次。简言之,就是关于元素堆叠的次序问题。 为此,你可以为每个元素指定一个数字(z-index)。其原理是:数字较大的元素将叠加在数字较小的元素之上。 比方说,我们正在打扑克,并且拿了一手同花大顺。我们可以通过为各张牌设定一个z-index…

    2020年2月25日
    2.0K0
  • HTML5网页中如何嵌入音频,视频?

    《HTML5的视频播放控制技术》 介绍了HTML5的video元素和常用属性,以及视频播放控制技术,如播放、暂停、音量、全屏、回放功能的实现。不会的童鞋可以学习。 本文主要介绍在HTML5 中如何嵌入音频,视频? 在HTML5 中如何嵌入音频? HTML5 支持 MP3、Wav 和 Ogg 格式的音频,代码示例: <audio controls>…

    2019年11月23日
    2.5K0
  • 哪些浏览器支持HTML5?

    目前支持HTML5的浏览器主要有: 谷歌浏览器(全面支持HTML5)、360浏览器、搜狗浏览器、世界之窗、Firefox、Safari、Opera、QQ浏览器、傲游浏览器、IE10。 如要下载支持HTML5的浏览器,请到官网下载!

    2019年3月13日
    4.5K0
  • 注册表单验证常用js代码:用户名、密码、邮箱等字段验证

    <script language=”javascript”>   //验证是否为数字   function IsDigit(cCheck)       {       return ((‘0′<=cCheck) && (cCheck<=’9’));       }      //验证是否为英文字母        fun…

    2021年11月30日
    7910
  • div+css实现面包屑导航-默认竖线分隔、箭头分隔、空白分隔

    div+css实现面包屑导航,主要用到了CSS3伪元素before,大家可以通过本利好好理解before的使用方法,下面125建站网给出实现代码。 <!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <title></title> &…

    2023年1月5日
    5560

发表回复

登录后才能评论