详细解读css中的浮动以及清除浮动的方法

   对于前端初学者来说,css浮动部分的知识是一块比较难以理解的部分,下面我将把我学习过程中的心得分享给大家。

导读:

  1.css块级元素讲解

  2.css中浮动是如何产生的

 3.出现浮动后,如何清除浮动(本文将涉及到多种清除浮动的方法)

博客正文:

  1.css块级元素讲解

  常见的块级元素主要有以下几种:<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form><dir><hr>。

  css中块级元素的特点:块级元素可以设置宽高,如果不设置的话,默认为父容器的宽高;总是在新行上开始并且独占一行;高度,行高以及外边距和内边距都可控制;可以容纳内联元素和其他块元素;

 2.css中浮动是如何产生的

  在网页布局中为了布局更美观,布局更方便,于是我们不可避免的要使用元素浮动,在css中我们使用float来设置浮动。下面我们来详细讲解浮动:

  请看下图,当把框 1 向右浮动时,它脱离文档流并且向右移动,直到它的右边缘碰到包含框的右边缘:

     再请看下图,当框 1 向左浮动时,它脱离文档流并且向左移动,直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中,所以它不占据空间,实际上覆盖住了框 2,使框 2 从视图中消失。

   如果把所有三个框都向左移动,那么框 1 向左浮动直到碰到包含框,另外两个框向左浮动直到碰到前一个浮动框。

   

  如下图所示,如果父容器的包含框太窄,将三个元素都设置为浮动后,如果水平排列的三个浮动元素超出包含框的宽度,那么排在后面的浮动块向下移动,直到有足够的空间。如果浮动元素的高度不同,最前面的元素高度高于后面被挤下来的元素,那么当它们向下移动时可能被其它浮动元素“卡住”:

     

   在实际开发中设置完浮动后,有的时候我们需要清除浮动,一次我们需要了解clear属性。

  3.出现浮动后,如何清除浮动(本文将涉及到多种清除浮动的方法)    

       清除浮动的语法:

 

         clear : none | left | right | both

 

       取值:

 

         none  :  默认值。允许两边都可以有浮动对象

 

         left   :  不允许左边有浮动对象

 

         right  :  不允许右边有浮动对象

 

         both  :  不允许有浮动对象

  牢记:css浮动的规则只能影响使用的元素本身,不会影响其他元素。

  在实际讨论清除浮动前我们先讨论下为什么要清除浮动,首先看一下下面的例子,有助于更好地理解为什么要清除浮动:

      

   代码如下:

     <!DOCTYPE html>
     <html>
          <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
             .div1{width: 200px;height: 200px;background: orange; float: left;}
             .div2{width: 200px;height: 200px;background: green; float: left;}
             .div3{width: 200px;height: 200px;background: red; float: left;}
             .outer{border: 1px solid #ccc;background: #fc9;color: #fff;}
           </style>
          </head>
          <body>
            <div class="outer clear-outer">
              <div class="div1">1</div>
              <div class="div2">2</div>
              <div class="div3">3</div>

       <div class="clear">3</div>
            </div>
          </body>
          </html>
   未清除浮动带来的影响主要有以下三点;

              1、背景不能显示

 

          2、边框不能撑开

 

        3、margin padding设置值不能正确显示
  清除浮动的方法:

  方法一:

    

.clear{clear:both; height: 0; line-height: 0; font-size: 0}

  方法二:父级div定义 overflow: auto 

    .clear-outer{      overflow: auto; zoom: 1; //zoom: 1; 是在处理兼容性问题     }

 

  方法三:

      .outer {zoom:1;}    /*==for IE6/7 Maxthon2==*/
    .outer :after {clear:both;content:'.';display:block;width: 0;height: 0;visibility:hidden;}/*==for FF/chrome/opera/IE8==*/

    这种方法清除浮动是现在网上最拉风的一种清除浮动,他就是利用:after和:before来在元素内部插入两个元素块,从面达到清除浮动的效果。其实现原理类似于clear:both方法,只是区别在于:clear在html插入一个div.clear标签,而outer利用其伪类clear:after在元素内部增加一个类似于div.clear的效果。

   清除浮动后的效果展示如下:

  

 总结:

  清除浮动的方式虽然是有很多种,但是不是每种都适合你,也不是每种都能很好的兼容所有浏览器,所以参照你觉得最好的方式去做,个人觉得方法三不错,不需多于的标签,而且也能很好的兼容。

 

 

  

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/369956.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CSS多列布局(实例)

前言 一列布局二列布局三列布局 1 一列布局 一列布局&#xff1a; HTML部分 <!DOCTYPE html> <html> <head> <meta charset"utf-8" /> <title>一列布局</title> </head> <body> <div class"head">…

大头贴计算机教程,推荐!自家电脑也能拍大头贴的秘密

您可能感兴趣的话题&#xff1a;美图拍拍核心提示&#xff1a;一直都超爱拍大头贴&#xff0c;喜欢每张都能换不同的框框&#xff1b;喜欢可以直接看到效果&#xff0c;做出满意的动作&#xff1b;喜欢将大头贴和朋友们分享……不过夏日炎炎的&#xff0c;出门太麻烦&#xff0…

css选择器的综合使用

代码实现&#xff1a; 1 <!DOCTYPE html>2 <html lang"en">3 <head>4 <meta charset"utf-8">5 <title>css的综合使用</title>6 <style>7 div {8 colo…

启动tomcat时 一闪而过解决方法

【前文】 在实际开发中一般都是eclipsetomcat(也许还会用到tomcat的插件)&#xff0c;我们只需要在eclipse中单击servers上的按钮就可以成功启动tomcat了&#xff0c; 但是如果想在tomcat的安装目录下 双击startup.bat启动时却一闪而过了。这是为什么呢&#xff08;tomcat启动失…

复习HTML CSS(5)

n <meta>标记 <meta>的主要作用&#xff0c;是提供网页的源信息。比如&#xff1a;指定网页的搜索关键字 <meta>标记有两个属性&#xff1a;http-equiv和name。 1、 http-equiv属性 功能&#xff1a;模拟http协议文件头信息&#xff0c;当信息从服务器端传…

『cs231n』卷积神经网络工程实践技巧_下

概述 计算加速 方法一&#xff1a; 由于计算机计算矩阵乘法速度非常快&#xff0c;所以这是一个虽然提高内存消耗但是计算速度显著上升的方法&#xff0c;把feature map中的感受野&#xff08;包含重叠的部分&#xff0c;所以会加大内存消耗&#xff09;和卷积核全部拉伸成为向…

计算机扬天m400c联想,【联想扬天M参数】联想扬天M系列台式电脑参数-ZOL中关村在线...

CPU型号内存容量硬盘容量屏幕尺寸显卡类型 价格详细对比Intel 奔腾双核 E52002GB DDRII 667MHz250GB SATAII 7200转高速防震硬盘集成显卡对比Intel 奔腾4 631512MBGB 512MB DDRII53380GB 7200转集成显卡对比Intel Atom 2301GBGB DDRII160GB 7200转高速防震硬盘集成显卡对比Inte…

Spring Data JDBC通用DAO实现–迄今为止最轻量的ORM

我很高兴宣布Spring Data JDBC存储库项目的第一个版本。 这个开放源代码库的目的是为基于Spring框架中 JdbcTemplate关系数据库提供通用&#xff0c;轻量且易于使用的DAO实现&#xff0c;与项目的Spring Data 框架兼容。 设计目标 轻巧&#xff0c;快速且开销低。 只有少数几个…

【期望DP】

【总览】 【期望dp】 求解达到某一目标的期望花费&#xff1a;因为最终的花费无从知晓&#xff08;不可能从$\infty$推起&#xff09;&#xff0c;所以期望dp需要倒序求解。 设$f[i][j]$表示在$(i, j)$这个状态实现目标的期望值&#xff08;相当于是差距是多少&#xff09;。 首…

复习HTML CSS(2)

n 项目符号嵌套编号思路 标签的内容&#xff08;文本、项目符号、表格、图片等&#xff09;必须放在最底层标记中。 n 图片标记&#xff08;行内元素&#xff0c;单边标记&#xff09; l 语法&#xff1a;<img 属性 “值”> l 常用属性 Width&#xff1a;图片宽…

Spring MVC:使用基于Java的配置创建一个简单的Controller

这是我博客上与Spring MVC相关的第一篇文章。 开端总是令人兴奋的&#xff0c;因此我将尽量简洁明了。 Spring MVC允许以最方便&#xff0c;直接和快速的方式创建Web应用程序。 开始使用这项技术意味着需要Spring CORE的知识。 在文章中&#xff0c;您将了解有关创建简单的Spri…

2、创建分类器笔记

创建分类器 简介&#xff1a;分类是指利用数据的特性将其分类成若干类型的过程。分类与回归不同&#xff0c;回归的输出是实数。监督学习分类器就是用带标记的训练数 据建立一个模型&#xff0c;然后对未知的数据进行分类。分类器可以实现分类功能的任意算法&#xff0c;最简单…

复习上学期的HTML CSS(1)

自己跟着网上教程复习上学期的HTML CSS&#xff0c;因为已经忘得差不多了&#xff0c;而且现在学的js也要以HTML CSS为基础&#xff0c;坚持每天持续更新。 n B/S 网络结构 Browser/Server 浏览器/服务器&#xff0c;这是现在最流行的网络模式。如新浪网、凤凰网等。 C/S Clie…

星战前夜服务器维护时间,EVE星战前夜开测时间在什么时候 什么时候测试

EVE星战前夜什么时候开测&#xff0c;EVE星战前夜的测试时间在什么时候&#xff0c;想要知道EVE星战前夜测试时间的小伙伴一起来看看EVE星战前夜的相关资讯&#xff0c;了解一下游戏的开测时间吧。EVE星战前夜目前仍在开发阶段&#xff0c;目前没有进行大范围的测试&#xff0c…

3、预测模型笔记

预测模型 1、简介 预测建模&#xff08;Predictive modeling&#xff09;是一种用来预测系统未来行为的分析技术&#xff0c;它由一群能够识别独立输入变量与反馈目标关联关系的算法构成。根据观测值创建一个数学模型&#xff0c;然后用这个模型去预测未来发生的事情。 预测模型…

常见问题_智能切膜机常见问题

hoco.智能切膜机&#xff0c;如果使用了错误方式&#xff0c;会导致操作失误&#xff0c;整理4个常见问题&#xff0c;还有错误示范&#xff0c;请跟随视频去了解&#xff0c;你使用正确了吗?1. 膜切反这个需要留意切割膜的正反&#xff0c;有文字面就是正面&#xff0c;无文字…

bootstrap的栅格系统和响应式工具

关于bootstrap的响应式布局&#xff0c;昨天看了杨老师的视频教学https://www.bilibili.com/video/av18357039豁然开朗&#xff0c;在这里记录一下 一&#xff1a;meta标签的引用 <meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" conte…

小熊错误_新手爸妈第一年带娃时,很容易犯的7个错误,对照看看你中了没

文 /关注小熊育儿&#xff0c;帮您轻松育儿带娃不是一件容易的事&#xff0c;对爸妈的时间和体力都是一种考验&#xff0c;不仅“熊孩子”让人头疼&#xff0c;育儿知识差&#xff0c;不懂科学育儿理念的“熊爸妈”也是让人很无奈的&#xff0c;最终受伤的还是孩子&#xff0c;…

python--装饰器、生成器、迭代器、元类

一、装饰器 def w1(func):def inner():func()return innerw1 def f1():print(1111111) 1.只要python解释器执行到装饰器&#xff0c;就会自动进行装饰&#xff0c;而不是等到调用的时候才进行装饰。 2.有参数的函数&#xff0c;装饰器定义方法 def w1(func):def inner(*args, *…

scss的使用方式(环境搭建)

我用的是Koala。 IDE是intellij_idea&#xff08;其他IDE也可&#xff09; 下载Koala&#xff1a;http://koala-app.com/ 2.安装&#xff08;选好位置&#xff0c;下一步即可&#xff09; 3.打开Koala&#xff0c;创建项目 》创建css文件夹》创建XXX.scss文件&#xff0c;拖到…