cvmachine.com - 申博开户网

搜索: 您的位置主页 > 电脑频道 > 电脑教程 > 阅读资讯:Css浮动的特性如何?

Css浮动的特性如何?

2018-06-20 11:27:15 来源:www.cvmachine.com 【

Css浮动的特性如何?

本文介绍了CSS浮动的特性,分享给大家,顺便给自己留个笔记

浮动具有以下特性:

  1. 盖不住的文本
  2. 浮动元素后面不是块级元素,后面的元素将会和它并排(除非设置了元素的宽度,并且屏幕放不下时将会换行)
  3. 浮动元素的上一个元素如果没有浮动,浮动只在当前行浮动;当浮动遇到浮动,它们将在一行排序,除非没有位置了
  4. 当元素设置定位值为absolute、fixed时,浮动将被忽略
  5. float引起父元素高度塌陷
  6. 浮动元素会被后一个元素的margin-top影响

盖不住的文本

188bet uedbet 威廉希尔 明升 bwin 明升88 bodog bwin 明升m88.com 18luck 188bet 澳门彩票 unibet unibet Ladbrokes Ladbrokes 12bet 真钱的棋牌游戏 casino m88明升 明升 明升 m88.com 188bet m88 明陞 uedbet赫塔菲官网 365bet官网 nba英文官网 嘉年华官网 皇冠备用 火箭队官网 中国人论坛 bet 单双公式 博彩资讯网 w88优德 港京印刷图库 澳门足球盘 球盘 娱乐场 联众网站 沙龙365 7080棋牌游戏 真钱 澳门回归日期 大众娱乐网 卡宾官方旗舰店 mg电子 全亚洲首选288x nba即时比分 本港 中国足彩竞猜网 斗地主规则 七星彩论坛图规 网上赌博 单双规律 沈泳 华夏娱乐网 明升备用网址 梦网书城 盈禾国际 明升体育 博狗沃鑫 卡宾官方旗舰 信誉赌场 球探比分网 竞彩论坛空间 三亚娱乐 soutec 北京福利彩票 澳门彩票公司 北京pk10 凤凰 纸牌小游戏 皇冠现金代理 银河国际亚洲首选288x 三六八高手论坛 空中城市 赌球心得 188比分 让球规则 三星娱乐城 诺贝尔娱乐城 今天有nba直播吗 5060全讯网 新世纪 久乐娱乐场 世界杯盘口 易胜博 麻将单机版 华人娱乐总站 财神爷心水论坛 巴特 澳门百利宫 明升 红姐统一主图库 九龙老牌图库 打牌 娱乐王子 娱乐真人 亚豪平台 真人娱乐 飞禽走兽老虎机 188bet下载 博发娱乐城 北单 陈怀生 比分188 百万图库 老挝赌博 pc蛋蛋注册 天上人间娱乐 红姐统一图库 产业新闻网 葡京
<style>
    body,div{
      margin:0;
      padding:0;
    }
    div{
      width:100px;
      height:100px;
    }
    .item1{
      float:left;
      background-color: pink;
    }
    .item2{
      background-color: #58d3e2;
    }
  </style>
<div class="item1">item1</div>
<div class="item2">item2</div>

Css浮动的特性如何?

可以看到,item2的div除了文本,其他的内容都看不见了,因为它跑到item1下面了。为什么文字不会被浮动的元素盖住呢?因为浮动的本质就是用来实现文字环绕的。

从上面也可以得出:浮动元素后面的块级元素会占据浮动元素的位置,并且浮动元素总是在标准流元素上面。

浮动元素后面不是块级元素,后面的元素将会和它并排(除非设置了元素的宽度,并且屏幕放不下时将不会换行)

<style>
    body,div{
      margin:0;
      padding:0;
    }
    div{
      width:100px;
      height:100px;
    }
    .item1{
      float:left;
      background-color: pink;
    }
    .item2{
      display: inline-block;
      background-color: #58d3e2;
    }
  </style>
<div class="item1">item1</div>
<div class="item2">item2</div>

Css浮动的特性如何?

浮动元素的上一个元素如果没有浮动,浮动只在当前行浮动;当浮动遇到浮动,它们将在一行排序,除非没有位置了

<style>
    body,div{
      margin:0;
      padding:0;
    }
    div{
      width:100px;
      height:100px;
    }
    .item1{
      background-color: pink;
    }
    .item2{
      float:left;
      background-color: #58d3e2;
    }
  </style>
<div class="item1">item1</div>
<div class="item2">item2</div>
<div class="item3">item3</div>

Css浮动的特性如何?

 <style>
    body,div{
      margin:0;
      padding:0;
    }
    div{
      width:400px;
      height:100px;
      float: left;
    }
    .item1{
      background-color: pink;
    }
    .item2{
      background-color: #58d3e2;
    }
    .item3{
      background-color: #61dafb;
    }
    .item4{
      background-color: #e9203d;
    }
  </style>
<div class="item1">item1</div>
<div class="item2">item2</div>
<div class="item3">item3</div>
<div class="item4">item4</div>

Css浮动的特性如何?

可以设置width为百分比来实现自适应

 div{
      width:25%;
      height:100px;
      float: left;
    }

Css浮动的特性如何?

当元素设置定位值为absolute、fixed时,浮动将被忽略

<style>
    body,div{
      margin:0;
      padding:0;
    }
    div{
      position: absolute;
      float: left;
      width:100px;
      height:100px;
      border: 1px solid red;
    }
  </style>
 <div class="item1">浮动遇上定位</div>

Css浮动的特性如何?

行内元素使用浮动以后生成一个块框,因此它就可以使用width,height,margin,padding等属性了

 <style>
    body,div{
      margin:0;
      padding:0;
    }
    [class^='item']{

      float: left;
      width:100px;
      height:100px;
      line-height: 100px;
      text-align: center;
    }
    .item1{
      float: left;
      background-color: pink;
    }
    .item2{
      display: inline-block;
      background-color: #58d3e2;
    }

  </style>
<span class="item1">item1</span>
<div class="item2">item2</div>

Css浮动的特性如何?

float引起父元素高度塌陷

在网页设计中,很常见的一种情况是给内容一个div作为包裹容器,而这个包裹容器不设置高度,而是让里面的内容撑开包裹容器的高度。如果不给子元素设置浮动的话,并不会出现什么问题,而一旦给子元素设置了浮动,父元素会无法自适应浮动元素的高度,会出现父元素高度为0,从而背景色什么的都不能展示了。原因是:

因为没有预先设置div高度,所以div高度由其包含的子元素高度决定。而浮动脱离文档流,所以子元素并不会被计算高度。此时的div中,相当于div中子元素高度为0,所以发生了父元素高度塌陷现象。

  <style>
    body,div{
      margin:0;
      padding:0;
    }

    .item{
      float: left;
      width:100px;
      height:100px;
      background-color: pink;
    }

  </style>
  <div class="box">
    <div class="item"></div>
  </div>

Css浮动的特性如何?

解决办法,

1.给父元素增加“overflow:hidden"

当然也可以是"overflow:auto"。但为了兼容IE最好用overflow:hidden。

.box{
 overflow:hidden;
}

那么为什么“overflow:hidden"会解决这个问题呢?

是因为“overflow:hidden”会触发BFC,BFC反过来决定了"height:auto"是如何计算的

,即计算BFC的高度时,浮动元素也参与计算,因此此时父元素会自适应浮动元素的高度。

所以呢,也可以设置"display:inline-block"、"position:absolute"、"float:left"来解决父元素高度坍塌的问题。因为凡是能创建一个BFC,就能达到包裹浮动子元素的效果。因此网上都说成“BFC能包裹浮动元素”.

2.在父元素内容的后面或者前面增加伪元素+清除浮动

可以给父元素的内容添加一个伪元素,可以用::before或者::after,然后内容为空,这样就不会占据位置,最后为伪元素加上“clear:both"来清除浮动。

 <style>
    body,div{
      margin:0;
      padding:0;
    }
    .box::after{
      content: '';
      display: block;
      clear:both;
    }
    .item{
      float:left;
      width:100px;
      height: 100px;
      background-color: deeppink;
    }

  </style>
<div class="box">
  <div class="item"></div>
</div>

Css浮动的特性如何?

为什么这样可以呢?

弄清原因需要知道两点:一是伪元素的实际作用,二是css的清除浮动(clear)只能影响使用清除的元素本身,不能影响其他元素,并且清除浮动可以理解为打破横向排列。

首先需要搞清除::after和::before起的作用,它们不是在一个元素的后面或者前面插入一个伪元素,而是会在元素内容后面或者前面插入一个伪元素(是在元素里面),之前我一直以为:before和:after伪元素 插入的内容会被注入到目标元素的前或后注入,其实注入的内容将是有关联的目标元素的子元素,但它会被置于这个元素的任何内容的“前”或“后”。我们来举个例子,可以看到.box的高度为300px,说明两个伪元素已经插入到.box内容里了。

<style>
    body,div{
      margin:0;
      padding:0;
    }
    .box::before{
      content: 'before';
      height: 100px;
      width: 100px;
      display: block;
      clear:both;
      background-color: #61dafb;
    }
    .box::after{
      content: 'after';
      width:100px;
      height:100px;
      display: block;
      clear:both;
      background-color: aquamarine;
    }
    .item{
      float:left;
      width:100px;
      height: 100px;
      background-color: deeppink;
    }

  </style>
<div class="box">
  <div class="item"></div>
</div>

Css浮动的特性如何?

综上,所以我们常用下列方式来清除浮动

.box::after{
 content:'';
 display:block;
 clear:both;
}
或者
.box::before{
 content:'';
 display:block;
 clear:both;
}
或者
.box::before,.box::after{
 content:'';
 display:block;
 clear:both;
}
//::before和::after必须配合content属性来使用,content用来定义插入的内容,content必须有值,至少是空。默认情况下,伪类元素的display是默认值inline,可以通过设置display:block来改变其显示。

在父元素的内容前后插入一个伪元素,content为空可以保证不占据位置(高度为0)。"clear:both"可以清除父元素左右的浮动,导致.box::before和.box::after遇到浮动元素会换行,从而会撑开高度,父元素会自适应这个高度从而不会出现高度坍陷。

其他解决高度坍塌的方法都是基于这两个思想的,一个是触发BFC,一个是添加元素+清除浮动(clear)。

浮动元素会被后一个元素的margin-top影响

<style>
    body,div{
      margin:0;
      padding:0;
    }
    div{
      width:100px;
      height:100px;
    }
    div:nth-of-type(1){
      float: left;
      background-color: #61dafb;
    }
    div:nth-of-type(2){
      margin-top: 100px;
      background-color: #58d3e2;
    }

  </style>
<div >div1</div>
<div>div2</div>

Css浮动的特性如何?

可以看到第一个div也跟着下来了,解决办法是给后一个元素设置clear,此时后一个元素的margin-top将无效

<style>
    body,div{
      margin:0;
      padding:0;
    }
    div{
      width:100px;
      height:100px;
    }
    div:nth-of-type(1){
      float: left;
      background-color: #61dafb;
    }
    div:nth-of-type(2){
      clear:both;
      margin-top: 100px;
      background-color: #58d3e2;
    }

  </style>
<div >div1</div>
<div>div2</div>

Css浮动的特性如何?

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持申博开户。

 

本文地址:http://www.cvmachine.com/dnjc/98913.html
Tags: css 浅谈 浮动
编辑:申博开户网
关于我们 | 联系我们 | 友情链接 | 网站地图 | Sitemap | App | 返回顶部