为什么浮动之后元素变成 block

2024-09-01

当一个元素被浮动后，它的display是否会被默认指定为block?

css 浮动后的元素不论是什么display的都默认是block就是设置inline也是block IE/6出现双边框的原因出现双边距的条件是当浮动元素的浮动方向和margin的方向一致时才会出现.也就是说,并不是只有块状元素左浮动,且具有左外边距时才有这个BUG,当一个盒子右浮动的同时有一个向右的margin-right的时候,IE6也会把margin-right解析为原来的2倍.当有多个同行元素都浮动了,而且都有同方向的margin,则只有最靠近浮动方向的元素有双边距bug.(如果都是一个

如何让浮动的元素换行？？css

当你想要做成这种布局效果的时候紫色框里面的内容那样它是一个列表 li元素是块级元素默认大小是父元素ul的宽并且换行如果li没有背景的话那就不用管了可是问题来了它不但有背景而且是根据文字自适应的宽高这就是inline-block类型的功能了那么想让li是inline-block 设置float 隐形改变可是浮动的话就不会换行了呀问题又来了没事滴给li folat:left 然后在clear:both 清除浮动不就好了清除浮动一共四个属性 clear:both|

当inline元素包裹block元素时会发生什么

经常有图片链接写法如下: <a href="www.baidu.com"><img src="baidu.jpg" /></a> 点击图片自动跳转,不用增加新的点击事件,光标滑过时变成小手等等,这都是a标签的功劳. 但是inline元素包裹block元素后,inline元素本身是否会变成blcok元素,还有待求证,于是做了如下对比: <div>这里是块元素</div> <span>用于测试(没有

居中div，居中浮动的元素

定位法:position:absolute 如果子级div有定义宽和高的话就可以用这个方法.注意:margin-top,和margin-left的值均为高和宽值的一半 margin:auto法这个也可以是定位法.用这个方法要求子级div必须设置宽的值,不然没有效果哦~margin:auto是水平垂直都居中,如果仅仅设置水平居中,可设置为margin:auto 0;同理,如果仅仅设置垂直居中,可设置为margin:0 auto. display:table-cell法这个方法主要针对多行文字内

CSS中的块级元素（block）与行内元素（inline）

css中有3种基本的定位机制:普通流(相对定位实际上看做普通流定位模型的一部分)浮动(float)绝对定位(固定定位是绝对定位的一种)所以在学习浮动之前,我们先要了解块级元素与内联元素(行内元素).块级元素:块级元素一般当做容器使用,既可以容纳内联元素也可以容纳块级元素,例如div和p.常见的块级元素:(1)div:主要用来进行框架布局.(2)h1-h6:用来设置不同级别的标题.(3)p:创建段落,会自动在其前后创建一些空白.(4)hr:用来创建分隔先.(5)ol:创建有序列表.(6)ul:创建

css浮动的元素居中

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>页面浮动元素的水平居中</title> <style type="text/css"> .clearfix:after { content:"

[ie兼容]ie7浮动左在前，浮动右在后导致右边浮动的元素掉下来

解决办法:左浮动和右浮动元素在结构上互换位置 http://blog.sina.com.cn/s/blog_818a1e5b0100wp5b.html

清除浮动2-父元素设置overflow:hidden

<!doctype html><html> <head> <meta charset="UTF-8"> <meta name="Author" content="胡超"> <title>super胡</title> <style> .news { background-color: gray; border: solid 1px black;overf

多个inline元素、block元素、inline-block元素在父容器中的换行情况

1.首先看inine元素的换行情况 <style> *{padding:0;margin:0} div.wrap{width:200px;height:200px;border:1px solid #ccc;margin:10px;} .inline-element a{margin:0 5px 0 0;padding:0 5px 0 0;height:20px;line-height:20px;background:#ccc;} </style> <div class=&q

inline元素、block元素、inline-block元素

inline 内联元素:是不可以控制宽和高.margin等:并且在同一行显示,不换行,直到该行排满. block 块级元素:是可以控制宽和高.margin等,并且会换行.块级对象元素会单独占一行显示,多个block元素会各自新起一行. inline-block 内联块级元素: 具有宽度高度特性,又具有同行特性(一行内显示) 常見的inline元素:span,a,strong,em等. 常見的block元素:div,p,h1到h6,form,ul,ol等. 常見的inline-block元素:im

inline元素、block元素

inline元素不会独占一行,相邻的行内元素会排列在同一行内,直到一行排不下才会换行高.行高.以及外边距和内边距不可改变宽度就是它的文字或图片的宽度,不可改变,随元素内容变化而变化内联元素只能容纳文本和其他内联元素只有水平方向margin-left.margin-right.padding-left.padding-right会产生边距效果 block元素会独占一行,默认情况下,其宽度自动填满父级元素宽度高度.行高.以及外边距和内边距都可控制宽度缺省时默认容器的百分之百可以容纳

css相对定位+浮动实现元素位置互换

1.设置元素透明度 opacity:0.5; // w3c filter:alpha(opacity=50); //IE 2 position:relative; float:left; 一起使用的效果 <div style="border:1px solid #ccc; height:30px; width:420px;"> <div class="sp1">左边....</div> <div class="sp

js获取浮动(float)元素的style.left值为空的解决办法

解决办法: 1.使用行内样式设置元素的top和left值; 2.or直接获取元素的offsetLeft得到相关数值,还不需要parseInt 问题原因: 如果父div的position定义为relative,子div的position定义为absolute,那么子div的style.left的值是相对于父div的值,这同offsetLeft是相同的,区别在于: style.left 返回的是字符串,如28px,offsetLeft返回的是数值28,如果需要对取得的值进行计算,还用offsetLe

ie6下js更新元素display:block后，仍然不显示的hack办法

$hotGames.html(html).removeClass("hide").show();//代码执行到这里,在ie6下仍然无法正常显示 //只有执行了下边的两行代码后,才正常显示.if (isIE6 === true) { $hotGames.css({"position":"absolute"}); setTimeout(function(){$hotGames.css({"position":"stati

1114作业 html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML文档</title> <style> body { margin: 0; } .clearfix:after { content: ''; clear: both; /*左右两边都不能有浮动的元素*/ display: block; }

day 46

目录 CSS样式操作给字体设置长宽字体颜色语义背景图片边框 display 盒子模型浮动(**************) 浮动带来的影响 clear overflow溢出属性定位位置的辩护是否脱离文档流 opacity CSS样式操作给字体设置长宽只有块级标签才可以设置长宽行内标签设置了没有任何作用(仅仅只取决于内部文本值) <!DOCTYPE html> <html lang="en"> <head> <meta cha

css全部理解

如何设置标签样式给标签设置长宽只有块儿级标签才可以设置长宽行内标签设置了没有任何作用(仅仅只取决于内部文本值) 字体颜色 color后面可以跟多种颜色数据颜色英文 red #06a0de 直接用pycharm提供的取色器即可 rgb(1,1,1) 可以利用截图软件获取三基色数字 rgba(0,128,128,0.9) 最后一个数字只能用来调节颜色的透明度语义 a { text-decoration: none; } 取消a标签默认的下划线背景图片默认是铺满整个区域通常一个页面上

css标签样式边框盒子模型定位溢出 z-index 透明度

目录一.CSS设置标签样式 1. 给标签设置长和宽 2.字体的颜色(3种表示方法) 3.文本样式 4. 语义 5. 背景样式 6. 边框 6.1 边框变圆 7.display 标签转换二.盒子模型三.浮动(************) 三.溢出四.定位五.z-index 控制z轴六.位置的变化是否脱离文档流 1.不脱离文档流 2.脱离文档流七.透明度一.CSS设置标签样式 1. 给标签设置长和宽只有块级标签才可以设置长宽行内标签设置了没有任何作用(行内仅仅只取决于内部的文本大小

解决float浮动带来的父元素高度没有的问题---清除浮动

float的特性 : 1:使元素block块级化: 2:破坏性造成的紧密排列特性. 基于以上的特性,使得我们通常把浮动用来布局,带来的问题是,容易出问题,重用性不行,ie6-的版本下很多问题,因为它是要求固定的宽度,宽度计算错误就会带来整个布局的错乱. float属性出现的初衷是为了让文字环绕图片实现图文混排的效果和应用于流体布局,所以float浮动带来的父元素高度没有的问题并不是我们说的是一个 BUG,这本身就是float的特性. 以下是解决float浮动带来的父元素高度没有的问题测试为I

CSS围住浮动元素的三种方法

浮动元素脱离了文档流,其父元素看不到它了,因而不会包围它.浮动会“扩散”到下一个清除浮动的元素处.这会引起不想要的页面布局效果. 清除浮动的方法有三种: 1.父元素overflow:hidden 2.同时浮动父元素 3.添加清除浮动元素. 1.父元素overflow:hidden overflow:hidden的真正作用是防止元素被超大内容撑大.使用hidden后,元素保持其设定的高宽,超大的内容会被“剪切”掉,变为页面不可见部分.同时,overflow:hidden也能强迫父元素包围浮动子元素

为什么浮动之后元素变成 block

热门专题