在HTML5 CSS3中,请简述清除浮动的三种方法及其优缺点?
1。使用clear:both清除浮动。
在代码中放一个空的div标签,然后设置标签clear:both来清除浮动对页面的影响。
优点:简单、方便、兼容。
缺点:因为会造成结构混乱,不利于后期维护。
建议:一般不推荐这种方法。
2.使用虚拟元素clearfix清除浮动。
向父元素添加“after伪元素”。通过清除伪元素的浮动,可以提高父元素的高度。
。clearfix:在{
显示:块;
明确:两者都有;
内容:& quot”;
可见性:隐藏;
高度:0;
}
。clear fix { zoom:1;}
原理:IE8以上和非IE浏览器只支持:after,zoom(带属性的IE)可以解决IE6和IE7的浮动问题。
优点:良好的浏览器支持,不容易出现奇怪的问题(目前使用的是大型网站,如滕循、网易、新浪等。)
缺点:代码多,很多初学者不懂原理。只有把两种代码结合起来,主流浏览器才能支持。
建议:建议使用,建议在公共类中定义,减少css代码。
3.父div定义溢出方法。
当为父元素设置溢出样式时,无论是overflow:hidden还是overflow:auto都可以清除浮动,只要其值不可见。
。父容器{
/*其他风格…*/
溢出:隐藏;
}
原理:其本质是构造一个BFC,从而达到支撑父元素高度的效果。
优点:简单,代码少,浏览器支持好。
缺点:不能和position一起用,因为超过尺寸的会被隐藏。
建议:只推荐给没用过position或者对overflow:hidden有深刻理解的朋友。
4.使用双重伪元素法。
通过给父元素设置双哑元,可以清除浮动效果,也就是在哑元之前加:和之后加:即可。
。clearfix:之前,。clearfix:在{
内容:& quot”;
显示:块;
明确:两者都有;
}
与方法2相同
html中怎么给文字添加浮动?
要实现html文字浮动效果光靠HTML 是不够的还要加上CSS组合一起才行。
要用p float
float语法:
float : none | left |right
float 的基本属性
none:不进行浮动(默认)
left:浮动在其所在的块容器左侧
right:浮动在其所在的块容器右侧
html代码
<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>p css 设定浮动</title>
<style>
/*设定p 的盒子大小*/
p
{
width:120px;
margin:0 0 25px 30px;
padding:15px;
border:1px solid black;
text-align:center;
}
/* 设定 盒子在右边浮动*/
.float-right {
float:right;
}
</style>
</head>
<body>
<p>1</p>
<p >盒子浮动在右边 2</p>
<p>3</p>
</body>
</html>
css3父级和子级都浮动了,那还用清除浮动吗?
浮动主要会影响后面其他的非浮动元素的布局,所以父元素的浮动是必须清除的,子元素也最好清除一下,以免出现一些莫名其妙的现象。我们可以这么来理解:浮动就像是原本在地面的一幢房子忽然漂浮在空中,这样地面上它原本占用的地皮就要被其他新建的房子占用了(这是未清除浮动的情况),如果这时候出一个硬性规定:这个房子的地皮仍然保留,其他房子不得占用,那么后面的其他房子就不需要挪位置了,所有房子的整体布局就不会发生改变(这就是清除浮动的情况)。
html怎样让表格悬浮在图片上?
HTML中,有两种方法可以做到图片右侧添加表格:
1.同一个p内,将图片设置成背景,同时将p内左边距(padding-left)设置成与图片一样的宽度,再在此p内加表格即可;
2.做成2个p,同时设置左浮动,第1个p的宽度设置成与图片一样宽,第2个p宽度根据自己表格情况设定即可,然后再第2个p里添加表格即可
如有问题可再接着问,希望能帮到你!
html网页标题怎么向右对齐?
如果是p一类的块元素使用浮动 float:left; 左对齐 margin:0 auto; 居中 float:right; 右对齐 如果是文字图片一类的内嵌元素给他的父级设置text-align:left; 左对齐 text-align:center;居中 text-align:right; 右对齐
html中导航栏前面的点怎么去掉?
list-style-type:none 去掉前面的小黑点
这是利用列表<li>来展示导航栏,用的float:left浮动金星列表的横向排列展示,最终形成导航栏
list-style-type 属性是设置列表项标记的类型这个属性默认值是disc就是标题所说的前面的点,
还可以拥有可多值,大致用到多的是none(去掉) circle(空心圆) square(实心方块) decimal(数字) …..还有很多值可以参考其中这个属性的API来进行阅读理解