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

  • Flex布局“弹性盒子”

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

    2020年4月12日
    2.7K0
  • label文字与textarea、input垂直居中、顶部对齐的方法

    在网站表单制作时label标签里的文字与Iput、textarea标签的默认对齐方式不美观,如下图。 姓名: 留言: 中国网页设计给大家分享label文字与input、textarea垂直居中对齐和顶部对齐的简单方法。 label文字与textarea、input垂直居中的方法 在input标签样式中加入css标签vertical-align: middle…

    2018年3月18日
    10.1K0
  • 第12课:页面布局(CSS)

    如何为页面实现理想的布局? 你可以使用级联样式表(Cascading Style Sheets,简称CSS)为网站设计页面布局。本课将对CSS作简单介绍。如需从头开始全面学习CSS知识,可以使用我们提供的CSS教程。因此,请将本课当作CSS的预备课。CSS是HTML的搭档。在编码过程中,它们发挥不同的作用:HTML负责网页的具体内容(结构),而CSS则修饰网…

    2018年1月19日
    2.4K0
  • 手把手教你做响应式网页,响应式布局实例入门(精)

    刚接触响应式布局的童鞋会感觉响应式布局很高大上,很难,但实际上只用CSS就能实现响应式布局。今天中国网页设计通过一个响应式布局实例,手把手教你如何制作响应式网页。 响应式布局(Responsive Layout) 响应式布局分别为不同的屏幕分辨率定义布局,同时,在每个布局中,应用流式布局的理念,即页面元素宽度随着窗口调整而自动适配。 响应式布局实例 当窗口大…

    2018年7月28日
    3.8K0
  • 网页中的框架(详解)

    所谓框架便是网页画面分成几个框窗,同时取得多个 URL。 一、制作框架页面的步骤: 1.编写所有子框架页面2.编写主框架页面3.在主框架页面中设定子框架名称4.如果框架页面之间存在链接,在子框架中设定链接。 注意:框架页面是不含标签的 二、基本语法 <frameset> <frame src=”url”> <noframes&g…

    2020年4月11日
    9.7K0
  • 如何制作图片按钮,并为图片按钮添加提交表单和重置表单功能

    网页中有表单,表单的默认按钮样式不是很好看,很多人为了美观使用图片做按钮。 今天中国网页设计给大家分享在网页制作中怎么制作图片按钮,并为图片按钮添加提交表单和重置表单功能。 一、图片按钮的制作方法 1、<input type=”image” /> 定义图像形式的提交按钮。 <input type=”image” sr…

    2018年9月30日
    3.6K0

发表回复

登录后才能评论