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%的人还看了以下文章

  • 第5课:到目前为止学到了些什么?

    上一课我们已经学习了这些: <html> <head><title></title></head> <body> </body> </html> 网页标题(title)写在head(头部)里:<title>网页标题写在这里</title>。…

    2018年1月20日
    3.5K0
  • jquery实现全选、反选、取消全选功能代码

    管理系统后台,商品管理、信息管理等,需要删除,为方便操作应该提供全选、反选、取消全选功能。 今天中文网页设计分享jquery实现全选、反选、取消全选功能代码 <html> <head> <meta http-equiv="Content-Type" content="text/html; chars…

    2018年10月17日
    5.5K0
  • Less编写及使用快速入门

    前面我们学习了《4个案例入门,学会LESS使用》,今天一起来学习如何编写,编译并使用LESS LESS的编写 LESS的使用是很容易的,使用你最常使用的代码编辑器,按LESSCSS的语法规则写好.less文件,接下来,使用编译工具它编译成.css,最后再引入页面即可。 LESS的编译 GUI编译工具 为方便起见,建议初学者使用GUI编译工具来编译.less文…

    2019年7月17日
    3.7K0
  • HTML5+CSS3制作网页实例:HTML5入门

    文章最后提供HTML5+CSS3制作网页实例源码下载。 步骤1 -设计 设计师先根据构想使用PHOTOSHOP设计页面,然后开始HTML和CSS编码,从设计背景、颜色和字体,细节部分的工作内容。 步骤2 – HTML 头部html代码 <!DOCTYPE html> <html> <head> <meta…

    2019年3月7日
    11.7K0
  • 3种纯CSS/jquery实现的表格隔行变色,鼠标悬停:hover变色效果

    表格隔行显示不同背景颜色,表格奇数行和偶数行交替显示不同的背景颜色。 一、纯CSS3实现表格隔行变色 关键CSS代码介绍 table tr:nth-child(odd){background:#F4F4F4;} table td:nth-child(even){color:#C00;} table tr:nth-child(5){background:#73…

    2018年9月5日
    4.9K0
  • Flex布局“弹性盒子”

    一.概念 flex布局: Flex Box 的缩写,意味“灵活的盒子”或“弹性盒子”,所以flex布局又称“弹性布局”。 flex容器 采用flex布局的元素,成为flex容器。display:flex; flex项目 flex容器的所有子元素自动成为容器成员,称为flex项目。 <div style=“ display:flex;”>   &l…

    2020年4月12日
    3.7K0

发表回复

登录后才能评论