投稿
  1. 125jz首页
  2. 教程
  3. 网页制作

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

孙萍 • • 网页制作 • 阅读 10229

主要知识点：

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)
孙萍的头像孙萍管理团队
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
css布局基础：定位练习1
上一篇 2020年4月4日 上午8:22
CSS3中文参考手册（飘零雾雨版+腾讯ISD版2合1）
下一篇 2020年4月4日 上午8:41

99%的人还看了以下文章

  • js 网页制作

    js判断输入字符串是否为空、空格、null总结

    本文总结了在用户输入表单数据时，如何使用JS判断输入空格，为空或null的三种情况。

    江山如画的头像 江山如画
    2021年11月30日
    8.3K0
  • 第15课：用z-index进行层次堆叠 网页制作

    第15课：用z-index进行层次堆叠

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

    江山如画的头像 江山如画
    2020年2月25日
    10.8K0
  • 36个漂亮的CSS3动态按钮，纯CSS制作无图片 网页制作

    36个漂亮的CSS3动态按钮，纯CSS制作无图片

    36个漂亮的纯CSS制作的动态按钮。

    江山如画的头像 江山如画
    2020年2月2日
    14.6K0
  • 手把手，永哥教你学会css sprite（雪碧图）技术 网页制作

    手把手，永哥教你学会css sprite（雪碧图）技术

    css sprite又称雪碧图或css精灵。 雪碧图就是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。 雪碧图被运用在众多使用了很多小图标的网站上。相对于把每张小图标以.png格式文件的形式引用到页面上，使用雪碧图只需要引用一张图片，对内存和带宽更加友好。 css sprite优点： 有效减少网站的http请求数量，加…

    江山如画的头像 江山如画
    2018年2月20日
    18.2K0
  • 第12课：高度和宽度 网页制作

    第12课：高度和宽度

    到目前为止，我们还没有在元素尺寸方面给予关注。在这一课，我们将看到为元素定义高度和宽度是十分简单的。 设定宽度[width] 设定高度[height] 设定宽度[width] 你可以通过width属性来设定一个元素的宽度，即在水平方向上的尺寸。 下面是一个简单的例子，它为我们提供了一个可以容纳文本的盒子： div.box {width: 200px;bord…

    江山如画的头像 江山如画
    2020年2月25日
    9.8K0
  • CSS的浮动及清除浮动的5种方法 网页制作

    CSS的浮动及清除浮动的5种方法

    css属性float：left/right/none 左浮动/右浮动/不浮动（默认），文章介绍了清除浮动的5种方法，并指出其实现原理、优缺点和使用建议。

    江山如画的头像 江山如画
    2019年11月5日
    9.1K0

发表回复

登录后才能评论