CSS中float专题

float的讲解:

初衷 例子 原理
实现图片文字的环绕效果
通过float,跳出了包裹自己的盒子,合盒子里面没有内容,那么height变为0;那么紧跟着本盒子的其他盒子就会往上移动,但是float后的元素并没有跳出文本流中,任然占有文本流的空间,其他盒子网上移动的过程中float后的内容就会去自动去拼接上移盒子中的内容,(但是两部分内容是独立的,可以通过margin: 0 50px 5px 0; 来设置间距)因此就会出现文字环绕的效果。

如何实现只浮动,盒子高度不为0呢?(清出浮动的影响)

  p { clear: both; } ;在紧接着浮动的元素上加上该样式;
效果是:让装有浮动的盒子保持高度;

1、flaot以后,display的值变为:block;还会去除空格;

2、flaot和position:relative同时使用:
.t2{
background-color: red;
position: relative;
top: 50px;
right: -50px;
float: right;
}
效果为:先在原来的位置相对偏移以后,在执行float的浮动效果,都没有脱离标准流;

3、如果position:absolute,和float同时出现的话,那么float失效,因为position:absolute是将元素脱离了标准流;所以flaot不起作用。

补充:加了定位(position)以后,层高于标准流中的值;

原文地址:https://www.cnblogs.com/helei747123/p/9239941.html

时间: 2024-10-03 05:32:32

CSS中float专题的相关文章

CSS中float和Clear的使用

CSS中float和Clear的使用 本文和大家重点讨论一下CSS中Float和Clear属性的使用,一个float对象可以居左或居右,一个设置为float的对象,将根据设置的方向,左移或右移到其父容器的边界,或其前面的float对象的边界,而紧随其后的非float对象或内容,则包围在其相反的方向. CSS中Float和Clear属性用法 实现多栏排版的最好方法是使用float属性,float也是一个将使你受益匪浅的属性.一个float对象可以居左或居右,一个设置为float的对象,将根据设置的

css中float属性和position

css中float属性: float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素. 如果浮动非替换元素,则要指定一个明确的宽度:否则,它们会尽可能地窄. 注释:假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止. 默认值: none 继承性: no 版本: CSS1 JavaScript 语法: object.styl

关于css中float的理解

感觉css里的float是个非常神奇的东西,神奇之处在于,你知道它是什么意思,但是用的时候总是不知道怎么实现效果.又或者它会很容易地影响到别的元素和属性.所以今天打算尝试一下float的各种设置,看看效果.在这篇博客里做个总结. 1. 设置float后对后面元素的影响 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>

css中float left与float right的使用说明

CSS中很多时候会用到浮动来布局,也就是经常见到的float:left或者float:right,简单点来说,前者是左浮动(往左侧向前边的非浮动元素飘,全是飘得元素的话,就按照流式来浮动从左到右,放不下则换行),后者是右浮(往右飘)动.但仅仅是如此吗? No! 要注意以下几点: 1. 浮动元素会被自动设置成块级元素,相当于给元素设置了display:block(块级元素能设置宽和高,而行内元素则不可以). 2. 浮动元素后边的非浮动元素显示问题. 3. 多个浮动方向一致的元素使用流式排列,此时要

解决CSS中float:left后需要clear:both清空

现在,大部分的横排导航都是通过 ul -> li *n -> a 来实现的.具我所知,要达到这种效果,有几种方法可以实现. 1.传统处理方式: li {float:left;}/*这样,对固定宽度导航条来说,li不能自动居中*/ 2.inline-block方式 ul {text-align:center;font-family:simsun;font-size:14px;} li {display:inline-block;*display:inline;zoom:1;margin-righ

关于CSS中float的两点心得

对一个元素运用float后,该元素将脱离正常文档流,这意味着: 1. 运用float后,该元素不再影响父元素的高度,如果一个元素的所有子元素都是float的话,那么该元素的高度是0,这样后面元素渲染的时候就会见缝插针,在该元素留下的一切空白中渲染,这个时候就需要清除浮动.关于清除浮动,首先要明白的是,什么是清除浮动.清除浮动实际上是指,撑开父元素的高度,让后面的元素渲染时,不再见缝插针地跑到它留下的空白中.这有很多现成的解决方法,需要明确的一点是:这些方法有些是作用在浮动元素的父元素上的,有些是

转: CSS中float和clear的理解

float:浮动,比如,默认的,我们知道,div是占满一行的,现在我们想把两个div显示在一行上,那怎么办呢<div style="width:100px;">11111</div><div style="width:150px">2222</div> 这样我们就设置了两个div,一个宽度100px,一个宽150px,可预览一下,我们的div仍在两行上,那么怎么把它改到一行上呢,这儿就需要float,设置第一个div的

html/css中float浮动的用法

一.float基础用法示例 1.我们先建两个div盒子,设置高度.宽度和背景颜色: 最开始两个盒子在网页上的位置如下: 然后我们将红色盒子浮动到右边 然后我们会发现红色盒子浮动到了右边,但是蓝色盒子就直接上移到了原先红色盒子的位置. 然后我们将蓝色盒子也浮动到右边看看效果: 我们会发现它会紧跟着红色盒子排列,而不会受块级元素影响独占一行. 二.浮动定位的基本规则 1.当元素的float属性取值为left或right时,元素属于浮动定位; 2.若剩余空间无法放下浮动的盒子,则该盒子向下移动,直到具

CSS系列:CSS中盒子的浮动与定位

1. 盒子的浮动 在标准流中,一个块级元素在水平方向会自动伸展,知道包含它的元素的边接:而在竖直方向与相邻元素依次排列,不能并排. CSS中float属性,默认为none.将float属性的值设置为left或right,元素就会向其父元素的左侧或右侧靠紧.同时默认情况下,盒子的宽度不再伸展,而是根据盒子里面的内容的宽度来决定. float: left; 可以使用clear来清除浮动: clear: left | right | both; 2. 盒子的定位 在CSS中有一个position属性,