文档章节

css中为什么需要浮动?

博为峰教研组
 博为峰教研组
发布于 2017/04/09 16:52
字数 677
阅读 16
收藏 0
点赞 0
评论 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就会按照行内元素的默认状态,显示在一行的最左侧。

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

 

© 著作权归作者所有

共有 人打赏支持
博为峰教研组
粉丝 49
博文 1224
码字总数 479077
作品 0
黄浦
程序员
【前端】你所不知的 CSS ::before 和 ::after 伪元素用法

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

issac宝华 ⋅ 2016/11/01 ⋅ 0

大家好,我给大家介绍一下,这是CSS伪元素:before与:after

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

GavinHsueh ⋅ 2017/10/23 ⋅ 0

CSS float浮动的深入研究、详解及拓展(一)

概念目录 个人感悟之CSS代码的情感化思维 个人观点之浮动的意义仅仅是文字环绕显示而已 个人观点之浮动的本质是“包裹及破坏” 个人观点之目前大多数浮动应用都不是浮动应该做的 个人观点之浮...

foodon ⋅ 2014/10/30 ⋅ 1

浮动定位BFC边距的合并

1. 浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 浮动元素的特征是 浮动模型也是一种可视化格式模型,浮动的框可以左右移动(根据float属性值而定),直到它...

熊蛋子17 ⋅ 2017/11/14 ⋅ 0

[译文]清除浮动的技巧

原文:Techniques for Clearing Floats 如果你很清楚(浮动元素)的后继者元素是什么,那么你只需将应用于那个元素即可。这是一个理想的情况,因为这种方法无需花式的技巧以及额外的元素。当...

huangpin815 ⋅ 2017/09/05 ⋅ 0

CSS清除浮动_清除float浮动

CSS清除浮动方法集合 一、浮动产生原因 - TOP 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了。 浮动产生样式效果...

单线程生物 ⋅ 2016/04/07 ⋅ 0

该死的IE6浏览器兼容问题及部分解决方案(网上整理)

作为一个初涉前端技术的IT菜鸟,IE浏览器的兼容问题是一个不得不跨越的坎。为了能够在不同浏览器达到同样的显示效果,就不得不花心思想出办法实现兼容。由于各大主流浏览器内核不同,各自的实...

The-duke ⋅ 2013/06/09 ⋅ 3

我所知道的几种display:table-cell的应用

一、display:table-cell属性简述 display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签。目前IE8+以及其他现代浏览器都是支持此属性 的,但是IE6/7只能对你说sorry了,这...

林文安 ⋅ 2012/05/30 ⋅ 0

CSS清除浮动

前言 总括: 在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出...

Damonare ⋅ 2016/12/07 ⋅ 0

网页中自私自利且影响他人的Float

引言: 相信大家在用Html+Css编写网页时会经常用到css中float(浮动)这个属性吧,浮动能让我们很好进行页面的布局,但种种问题也随之而来。 一.float的基本属性及应用 这个属性叫漂浮,顾名...

JX2011 ⋅ 2013/12/02 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Java NIO之字符集

1 字符集和编解码的概念 首先,解释一下什么是字符集。顾名思义,就是字符的集合。它的初衷是把现实世界的符号映射为计算机可以理解的字节。比如我创造一个字符集,叫做sex字符集,就包含两个...

士别三日 ⋅ 36分钟前 ⋅ 0

Spring Bean基础

1、Bean之间引用 <!--如果Bean配置在同一个XML文件中,使用local引用--><ref bean="someBean"/><!--如果Bean配置在不同的XML文件中,使用ref引用--><ref local="someBean"/> 其实两种......

霍淇滨 ⋅ 41分钟前 ⋅ 0

05、基于Consul+Upsync+Nginx实现动态负载均衡

1、Consul环境搭建 下载consul_0.7.5_linux_amd64.zip到/usr/local/src目录 cd /usr/local/srcwget https://releases.hashicorp.com/consul/0.7.5/consul_0.7.5_linux_amd64.zip 解压consu......

北岩 ⋅ 44分钟前 ⋅ 0

Webpack 4 api 了解与使用

webpack 最近升级到了 v4.5+版 01 官方不再支持 node4 以下版本 官方不再支持 node4 以下版本官方不再支持 node4 以下的版本,所以如果你的node版本太低,先开始升级node吧!话说node10 ...

NDweb ⋅ 54分钟前 ⋅ 0

使用nodeJs安装Vue-cli

Vue脚手架就是一个Vue框架开发环境 脚手架的意思是帮你快速开始一个vue的项目,也就是给你一套vue的结构,包含基础的依赖库,只需要 npm install就可以安装,让我们不需要为了编辑或者一些其...

木筏笔歆 ⋅ 今天 ⋅ 0

【微信小程序开发实战】0x00.开发前准备工作

写在开始 本人资深后端码农一枚,近期项目需求,接触到了微信小程序,将学习过程整理成文分享给小伙伴们,由于是边学边整理难免有表述不对的地方,望大家及时指正,感谢。 本人微信号: dream...

dreamans ⋅ 今天 ⋅ 0

linux redis的安装和php7下安装redis扩展

安装redis服务器 (1)下载安装包: $ wget http://download.redis.io/releases/redis-2.8.17.tar.gz (2)编译程序: $ tar xzf redis-2.8.17.tar.gz $ cd redis-2.8.17 $ make $ cd src &&......

concat ⋅ 今天 ⋅ 0

Guava EventBus源码解析

一、EventBus使用场景示例 Guava EventBus是事件发布/订阅框架,采用观察者模式,通过解耦发布者和订阅者简化事件(消息)的传递。这有点像简化版的MQ,除去了Broker,由EventBus托管了订阅&...

SaintTinyBoy ⋅ 今天 ⋅ 0

http怎么做自动跳转https

Apache 版本 如果需要整站跳转,则在网站的配置文件的<Directory>标签内,键入以下内容: RewriteEngine on RewriteCond %{SERVER_PORT} !^443$ RewriteRule ^(.*)?$ https://%{SERVER_NAME......

Helios51 ⋅ 今天 ⋅ 0

Python爬虫,抓取淘宝商品评论内容

作为一个资深吃货,网购各种零食是很频繁的,但是能否在浩瀚的商品库中找到合适的东西,就只能参考评论了!今天给大家分享用python做个抓取淘宝商品评论的小爬虫! 思路 我们就拿“德州扒鸡”...

python玩家 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部