文档章节

css中为什么需要浮动?

博为峰教研组
 博为峰教研组
发布于 2017/04/09 16:52
字数 677
阅读 23
收藏 0

#程序员薪资揭榜#你做程序员几年了?月薪多少?发量还在么?>>>

使用css进行布局,我们都知道浮动,那么我们为什么要使用浮动呢?下面我们就以京东登录界面顶部的布局来讨论这个问题。下图是我们写好的京东登录界面。

在顶部布局中,代码如下

html代码

 

<header>
    <div class="header-content">
        <href="index.html" class="logo"></a>
        <span>欢迎登录</span>
        <div class="login"><i></i><href="#">登录页面,调查问卷</a> </div>
    </div>
</header>

css代码

公共样式index.css

html,body,header,main,nav,aside,article,summary,details,footer,p,img,ul,li,ol,dl,dd,dt,
h1,h2,h3,h4,h5,section{
    margin:0;
    padding:0;
}
html,body{
    width:100%;
    font-family"Microsoft YaHei","Hiragino Sans GB";
    color#666;
}
ul,ol,li{
    list-stylenone;
}
a{
    text-decorationnone;
}
h3{font-weightnormal}

 

登录界面样式login.css

*{
    -webkit-box-sizingborder-box;
    -moz-box-sizingborder-box;
    /*标准盒子模型*/
    box-sizingborder-box;
}
header{
    width:100%;
    height: 80px;
}
header .header-content{
    box-sizingborder-box;
    width: 990px;
    height: 80px;
    margin: 0 auto;
    vertical-alignmiddle;
    /*background-color: red;*/
}
header .header-content .logo{


    floatleft;
    width: 160px;
    height: 60px;
    /*左,上*/
    backgroundurl("../image/icon.png"no-repeat 0 15px;
}
header .header-content span{
    floatleft;
    font-size: 24px;
    padding-left: 30px;
    padding-top: 20px;
}
header .header-content .login{
    floatright;
    font-size: 12px;
    margin-top: 55px;
    padding-bottom: 5px;
    font-familyArial,Verdana,"\5b8b\4f53";
}
header .header-content .login i{
    displayinline-block;
    width: 18px;
    height: 16px;
    margin: 0 5px;
    backgroundurl("../image/msg-icon.png"no-repeat ;
}
header .header-content .login a{
    color#999;
    positionrelative;
    top: -5px;

}
header .header-content .login a:hover {
    color#E4393C;
    text-decorationunderline;
}

 

由上述代码,我们可以看到在对顶部的左侧“京东图标”,“欢迎登录”设置左浮动,对右侧的“登录页面,调查问卷”设置右浮动。那么如果我们不设置浮动会有什么效果呢?

当我们把header .header-content .logo 和 header .header-content span的左浮动关掉,此时顶部左侧显示的效果为:

 

此时我们可以看到出现2个问题

1.京东的图标不见了

2.“欢迎登录”跑到左边了

 

京东图标是通过标签a显示的。a是行内元素,在文档流中的时候因为是行内元素所以无法设置宽高;而当设置了绝对定位或者浮动,会生成块框(即变成块元素),所以就可以设置宽高了。这里把行内元素a的浮动关闭,会导致a标签设置的宽和高是无效的,所以京东的图标就不会显示。

“欢迎登陆”是通过span标签显示的,span也是行内元素。行内元素会在一条直线上,是在同一行的。当显示京东图标的a标签消失,此时span的左浮动也关闭,所以span就会按照行内元素的默认状态,显示在一行的最左侧。

使用浮动可以是行内元素变为块级元素,浮动是一把双刃剑,我们要注意一点,能不使用浮动,则不要使用浮动。

 

© 著作权归作者所有

博为峰教研组
粉丝 52
博文 1224
码字总数 479077
作品 0
黄浦
程序员
私信 提问
加载中

评论(0)

【前端】你所不知的 CSS ::before 和 ::after 伪元素用法

CSS 有两个说不上常用的伪类 :before 和 :after,偶尔会被人用来添加些自定义格式什么的,但是它们的功用不仅于此。前几天发现了 Creative Link Effects 这个非常有意思的介绍创意链接特效的...

issac宝华
2016/11/01
60
0
CSS的伪类 :before 和 :after

CSS 有两个说不上常用的伪类 :before 和 :after,偶尔会被人用来添加些自定义格式什么的,但是它们的功用不仅于此。前几天发现了 Creative Link Effects 这个非常有意思的介绍创意链接特效的...

osc_1k3ioadv
2019/01/08
3
0
如何在另一个div内对齐3个div(左/中/右)?

我想在容器div中对齐3个div,如下所示: 容器div的宽度为100%(未设置宽度),调整容器大小后,居中div应该保持居中。 所以我设置: 但它变成: 有小费吗? #1楼 如果您不想更改HTML结构,也...

javail
02/14
15
0
详细解读css中的浮动以及清除浮动的方法

对于前端初学者来说,css浮动部分的知识是一块比较难以理解的部分,下面我将把我学习过程中的心得分享给大家。 导读: 1.css块级元素讲解 2.css中浮动是如何产生的  3.出现浮动后,如何清除...

osc_w5iew3dd
2018/04/16
1
0
大家好,我给大家介绍一下,这是CSS伪元素:before与:after

之前对于CSS伪元素的应用并不多,最近在用一款建站系统为客户做企业门户网站时,发现网页HTML代码中经常出现::before和::after。后经查资料才了解,这都是CSS的为元素。CSS 伪元素用于向某些...

GavinHsueh
2017/10/23
0
0

没有更多内容

加载失败,请刷新页面

加载更多

好的可视化编辑器收集

国内 https://www.ivx.cn/index 国外 https://vectr.com

lilugirl
3分钟前
7
0
怎么在分享流程图的时候设置密码?迅捷画图教你保密小技巧!

怎么在分享流程图的时候设置密码?相信大家对分享链接和密码已经不陌生了,毕竟现在分享资源主要用的网盘、网站等等,基本上都需要先获取密码,才能进入分享链接页面,从分享资源的角度来说,...

赛利亚大姐大
3分钟前
6
0
如何在Mac电脑中输入多种标点符号和文字表情

特殊的标点符号和表情怎么输入?MAC电脑有自己自带的输入法,但是对于一些表情符号很多人都不知道在哪里使用,现在就来介绍一下MAC如何输入多种标点符号和文字表情。 1、首先我们打开备忘录,...

mac小叮当
13分钟前
17
0
Ubuntu替换国内源

网络环境的原因,官方的apt的源的速度比较慢,打算替换为国内源,正好学校有Ubuntu的源,所以替换下 编辑文件/etc/apt/sources.list 将其中的内容换为对应的系统的目标源即可。 选择你的ubu...

zhangwenwen
35分钟前
14
0
持续交付的最后一英里

如果开发人员的变更集在集成时并没有实现长期部署就绪的状态,那么你的团队其实就没有真正的实践持续交付。 想要完全优化产品开发周期,你需要在团队中强调无缝部署的重要性,使每位工程师都...

京东智联云开发者
36分钟前
18
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部