| css浮动会有什么影响,CSS，浮动及其影响 | 您所在的位置：网站首页 › css不受浮动影响 › css浮动会有什么影响,CSS，浮动及其影响 |
css浮动会有什么影响,CSS，浮动及其影响
|
浮动(float)： 让默认文档流(标准文档流)下的元素漂浮起来，水平排列。 通俗点来说，浮动可以让元素浮到第二层，而其他没有浮动的元素就往上排，而我们是俯视去看的，所以往上顶的那个元素就会被遮住，这就带来了问题。解决方法，后面会有说。 float: 1. left----左浮 2. right------右浮 3. none ------不浮动 默认(标准)文档流： 说白了就是一个“默认”状态。文档流指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。 浮动带来的影响： 1. 行内元素在浮动之后，可以支持宽高。 p{ float: left; width: 50px; height: 50px; border: 1px solid #000; }
2. 文本会给浮动的元素让位，可以制作成文本环绕的效果。 p{ float: left; width: 50px; height: 50px; border: 1px solid #000; }
3. 在没有给父级高度的情况下，子级浮动后，父级会没有高度。 这是没有给子级设置浮动的情况下： div{ background-color: #f00; } p{ /*float: left;*/ width: 50px; height: 50px; border: 1px solid #000; }
给子级设置浮动后： div{ background-color: #f00; } p{ float: left; width: 50px; height: 50px; border: 1px solid #000; }
这里给出的解决方案主要是针对第三种的。 解决方法主要有几个，下面我就向大家一一介绍： 1. 在父级内容最后添加一个空的div，添加clear属性 clear-----left------清除左浮动 right------清除右浮动 both-----清除所有浮动 这个方法不推荐使用，因为他会添加大量的无用的标签，让页面的布局变的更加的复杂。 2. 给父级设置 overflow:hidden； 溢出隐藏，会触发bfc(block formatting context)块级格式化上下文 这个也不推荐使用，在和定位一起使用的时候，会产生其他的问题。 3. 使用伪元素 :after (推荐使用) .clear:after{ content: ""; /*内容为空*/ height: 0; line-height: 0; display: block; /*块级元素*/ visibility: hidden; /*隐藏*/ clear: both; /*清除浮动*/ } .clearfix{ /*兼容性问题*/ zoom: 1; /*ie678*/ } 4. 使用伪类元素(第三种的改进) 缺点，相比于第三种，有点不严谨 .clear:after,.clear:before{ content: ""; /*内容为空*/ display: block; /*块级元素*/ clear: both; /*清除浮动*/ } .clearfix{ /*兼容性问题*/ zoom: 1; /*ie678*/ } CSS浮动并清除浮动(造成的影响) 一.浮动 CSS浮动 CSS float浮动的深入研究.详解及拓展(一) CSS浮动属性Float详解 块级元素独占一行 块级元素,在页面中独占一行,自上而下排列,也就是传说中的流. 可以 ... CSS浮动、定位 这几天有空,整理了关于CSS浮动和定位的一些知识点,有什么欠缺的地方,欢迎大家批评指正. 一.文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流,指的是元素排版布局过程中,元素会自动从左往右 ... CSS浮动文摘 很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 写在前面的话: 由于CSS内容比较多,没有精力从头到尾讲一遍,只能有 ... CSS浮动(float,clear)通俗讲解 首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流.如下图: 可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1后边,因为d ... 经验分享：CSS浮动(float,clear)通俗讲解 很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ... 经验分享：CSS浮动(float,clear)通俗讲解(转载) 很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ... 经验分享：CSS浮动(float,clear)通俗讲解 太棒了，清晰明了 很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ... 彻底理解浮动float CSS浮动详解 清除浮动的方法 我们把网页的常用的布局格式分为以下三种: 1.标准流. 所谓的标准流就是,行内元素自己单独一行,而块级元素是上下显示的. 以前我们学习的都是标准流. 注意:标准流使我们网页布局中最稳定的一种结构 ... (转)经验分享：CSS浮动(float,clear)通俗讲解 很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ... css浮动布局 上次我们一起对盒子模型进行了一定的了解,今天我们就对css浮动布局做一下研究.首先我们来了解一下网页基本布局的三种形式. 首先我们来了解一下什么是网页布局: 网页的布局方式其实就是指浏览器是如何对网页 ... 随机推荐 Android中webView和网页的交互 Android中webView和网页的交互 Android中webView跟网页的交互式通过JavaScript进行的.具体步骤: 1.创建JavaScript,在点击的时候调用JavaScript ... SpringMVC上传文件以流方式判断类型附常用类型 // 此类中判断类型所截取的byte 长度暂不确定,请使用者测试过使用 package com.tg.common.other; import com.tg.common.tginterface.TG ... Servlet 后台获取XML D package net.nw.servlet; import java.io.IOException; import java.io.PrintWriter; import javassist.e ... 330. Patching Array Given a sorted positive integer array nums and an integer n, add/patch elements to the array such th ... Python3 hasattr()、getattr()、setattr()、delattr()函数 hasattr()函数 hasattr()函数用于判断是否包含对应的属性 语法: hasattr(object,name) 参数: object--对象 name--字符串,属性名 返回值: 如果对象 ... HTTP请求定义不同Content-Type及在SpringMVC如何接收(必看！！！) 前言最近在和三方对接的时候发现了一些问题,这也是我写这篇文章的原因.我大概花了三天时间把这些内容了解,实践,整理,然后分享给大家,希望对大家会有所帮助.废话不多说,在和三方对接的时候我们规定使用jso ... PostgreSQL的SQL语句中的双引号引发的问题 最近开发一个WEB的ETL工具需要用到不同的数据源.第一次用POSTGRESQL发现一个双引号引发的问题: 标准的SQL是不区分大小写的.但是PostgreSQL对于数据库中对象的名字允许使用支持大小 ... hdu-2421 Deciphering Password 数学姿势 给定A,B,对于A^B的每一个因子,M为其因子的因子数的三次方求和. 容易推导得出A^B的每一个因子都是A的质因子的组合(质因子可重复利用),其因子数自然等于所使用的每个质因子的数量乘积. 假设A由质 ... 代码编辑器之sublime text http://www.iplaysoft.com/sublimetext.html 1.特点: 中文乱码问题:另外,很多朋友反映表示打开中文会有乱码,其实是因为ST2本身只支持UTF-8编码,而我们常 ... |
【本文地址】