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日
    3.0K0
  • 给网页中的按钮和图片添加声音

    Loud links-是一款大小只有1.5KB的WEB音效插件,可以实现网页中按钮与图片等元素的触发交互,比如鼠标放上去后出现响声,或者鼠标点击后出现响声。Loud links使用相当简单。 使用方法 1. 在网页中引入JS 文件 <script src=”js/loudlinks.min.js”></script> 2. 在需要触发…

    2018年2月6日
    5.1K0
  • 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.3K0
  • 跟永哥学HTML5(5):正确使用HTML5的nav和figure

    这节课就给大家讲解常见的HTML5标签错误使用写法,帮助大家理解并学会正确使用HTML5的nav和figure。 1、不要把所有列表式的链接放在nav里 随着HTML5引入了 30个新元素,我们在构造语义化和结构化的标签时的选择也变得有些不慎重。也就是说,我们不应该滥用超语义化的元素。不幸的是,nav就是这样一个被滥用的例子。 nav元素的规范描述如下: n…

    2018年2月3日
    2.7K0
  • Div+CSS左侧尺寸固定右侧自适应布局的5种实现方法

    css多栏自适应布局一般使用position属性布局,或者用float属性布局,也可以使用display属性。 position适合首页布局,因为首页内容往往可以完全控制。float适合模板布局,模板中填充的内容无法控制。 相关阅读:左侧固定,右侧自适应布局的两种实现方法 1、浮动实现 原理:左侧定宽浮动,右侧使用margin-left,且不要定宽,容器尺寸…

    2021年11月29日
    2.3K0
  • 0基础学CSS

    本CSS教程能够让你在数小时内入门CSS,要求你有基本的HTML经验。

    2020年2月22日
    2.5K0

发表回复

登录后才能评论