为什么定位会被float和clear影响!
作者:林小志 来源:林小志blog 发布时间:2008-11-10 11:06:00
因为一个需求,因为自己想多了一点东西,最后发现了一个问题,一个很奇怪的问题。这个问题我想还是我自己当初想法上的出路导致的吧,但想不通为什么会这样。就因为临时一个想法,把原本打算右浮动的块改成了绝对定位,结果出现了问题,绝对定位不见了。
想不明白,沉思……
突然想到,我好像对某一块加了 clear:both; 来清除浮动的,难道是这个引起的,抱着尝试的心态试了一下,果然如此!
兴奋一下,交差!
===============================
完成任务之后,有点空余时间,一直就是在想为什么会这样,于是乎整理了一下,在群里问,结果当时许未来同学告诉我一个东西,说定位跟clear的关系,当时想想很有可能,不过后来仔细一想不对,不是因为这个问题,因为许未来同学说的是相对定位,而我的是绝对定位。
不多说,给大家看看整理后的代码
程序代码
* {margin:0;padding:0;}
#container {position:relative;width:970px;overflow:hidden;margin:0 auto;}
.intro{float:left;width:304px;height:455px;margin-right:12px;margin-bottom:12px;display:inline;border:1px solid #B6CAE3;}
.plan {position:absolute;top:0;right:0;width:204px;margin-bottom:12px;height:455px;border:1px solid #B6CAE3;background:#F00;}
.picList {clear:both;width:968px;height:300px;margin-bottom:12px;border:1px solid #B6CAE3;}
程序代码
<div id="container">
<div class="intro">这个是浮动的块</div>
<div class="plan">这个是定位的块</div>
<div class="picList">这个是带有clear:both;清除浮动的块</div>
</div>
HTML代码
解决的方法呢有以下几种,分别是
1、去掉 .picList 中的 clear:both;
2、<div class="plan">这个是定位的块</div> 在结构中,让这个块内容移到 <div class="picList">这个是带有clear:both;清除浮动的块</div> 下面,也就是让 .picList 中的 clear:both; 不对 .plan 起作用。
3、去除绝对定位前面的浮动,也就是 <div class="intro">这个是浮动的块</div> 的 float:left;
猜你喜欢
- 刚接触Python的时候,简单的异常处理已经可以帮助我们解决大多数问题,但是随着逐渐地深入,我们会发现有很多情况下简单的异常处理已经无法解决
- PHP convert_uuencode() 函数实例编码字符串:<?php $str = "Hello world!&qu
- 文件内容:excel内容:代码:import xlrdimport jsonimport operatordef read_xlsx(fil
- mapmap(funcname, list)python的map 函数使得函数能直接以list的每个元素作为参数传递到funcname中,
- function is_utf8($string) { &n
- 目录一、生产环境,开发环境切换第一种方法:通过配置.env文件来实现第二种方法二、过滤器三、moment时间库使用一、生产环境,开发环境切换
- 因此,在数据库的日常维护工作中,如果只是一次两次碰到ORA-01555错误,一般都先忽略,但是如果经常碰到该错误,则要进行一些调整以避免该错
- 前言问题:我们在放大图片的过程中,放大的目标图像和原图图像之间会存在不同。放大的基本思想:第一步:将目标图像进行缩小到原图像的尺寸,虚拟的将
- 分为服务端和客户端,要求可以有多个客户端同时操作。客户端可以查看服务器文件库中有什么文件。客户端可以从文件库中下载文件到本地。客户端可以上传
- 前言本文使用 cpu 的 tensorflow 2.4 完成迁移学习和模型微调,并使用训练好的模型完成猫狗图片分类任务。预训练模型在 NLP
- 我们在Python中经常使用会用到matplotlib画图,有些曲线和点的形状、颜色信息长时间不用就忘了,整理一下便于查找。安装matplo
- replace()最简单的算是能力就是简单的字符替换。示例代码如下: <script language="javascrip
- 1. 多曲线1.1 使用pyplot方式import numpy as npimport matplotlib.pyplot as pltx
- 项目中使用的日志库是使用python官方库logging封装的,但是居然一直么有设置日志自动滚动,经常会受到告警说哪台机器磁盘空间又满,清理
- 五子棋还是有很多大佬发的,今天我也发一篇萌新写的小五子棋,这个是终端版的,如果有问题请大家指出,我去修改代码如下:screen = []sc
- 如下所示:# -*- coding:utf-8 -*-from datetime import datetimeimport redef M
- 参与测试的浏览器:IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2操作系统:Windows我喜欢p
- 有时,希望除去某些记录或更改它们的内容。DELETE 和 UPDATE 语句令我们能做到这一点。用update修改记录UPDATE tbl_
- 代码已经调通,跑出来的效果如下:# coding=gbkimport torchimport matplotlib.pyplot as pl
- 1.VUE验证邮箱export const isEmail = (s) => { return /^([a-