6、使用邻元素处理:给浮动元素后面的元素内容增加clear属性,把浮动元素清走
什么都不做,给浮动元素后面的元素添加clear属性
.content{ clear:both; } <div class="content"></div>
什么都不做,给浮动元素后面的元素添加clear属性
.content{ clear:both; } <div class="content"></div>
4、父级元素设置高度
5、父级元素不设置高度,加代码overflow:hiddden或者overflow:auto,可以清除浮动
(overflow有两种含义:1、隐藏溢出 2、清除浮动。清除浮动的含义就是在它会清除掉在父级元素里面的浮动元素,元素又回到容器内,把高度撑起来。而隐藏溢出的含义是父级元素设置高度,子元素也设置高度,当子元素高度高于父元素的部分,自动隐藏)
此方法有效地解决了通过空标签元素清除浮动而不得不增加无意代码的弊端,不过使用overflow的时候,可能会对页面表现带来影响,而且这种影响是不确定的,你最好是能在多个浏览器上测试你的页面;
5、父级元素不设置高度,加代码overflow:hiddden或者overflow:auto,可以清除浮动
(overflow有两种含义:1、隐藏溢出 2、清除浮动。清除浮动的含义就是在它会清除掉在父级元素里面的浮动元素,元素又回到容器内,把高度撑起来。而隐藏溢出的含义是父级元素设置高度,子元素也设置高度,当子元素高度高于父元素的部分,自动隐藏)
此方法有效地解决了通过空标签元素清除浮动而不得不增加无意代码的弊端,不过使用overflow的时候,可能会对页面表现带来影响,而且这种影响是不确定的,你最好是能在多个浏览器上测试你的页面;
3、使用clearfix after清除对象(推荐)
给浮动元素的容器添加一个clearfix的class,然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素(Block element)清理浮动。
该方法只适用于非IE浏览器 。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置height:0,否则该元素会比实际高出若干像 素;二、content属性是必须的,但其值可以为空。
给浮动元素的容器添加一个clearfix的class,然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素(Block element)清理浮动。
该方法只适用于非IE浏览器 。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置height:0,否则该元素会比实际高出若干像 素;二、content属性是必须的,但其值可以为空。
2、在浮动元素后面加个div(p、 hr都可以)设置:clear:both height:0 overflow:hidden
(这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签清除浮动)
此方法有效地解决了通过空标签元素清除浮动而不得不增加无意代码的弊端
(这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签清除浮动)
此方法有效地解决了通过空标签元素清除浮动而不得不增加无意代码的弊端
关于父级元素塌陷。就是父级元素里多个子集元素,如果某个子集元素设置为浮动型,那它们就不受文档流限制,导致父级元素没有高度,不能被撑起来。
解决这个问题有几个办法:http://www.cnblogs.com/ForEvErNoME/p/3383539.html
1、设置父级元素浮动
(会引起整体浮动,有可能影响布局,不推荐)
解决这个问题有几个办法:http://www.cnblogs.com/ForEvErNoME/p/3383539.html
1、设置父级元素浮动
(会引起整体浮动,有可能影响布局,不推荐)
已采纳回答 / 中二校长
background-position默认位置是图片的左上角和&oocem&g边框左上角对齐,如下图:<...图片...>当background-position:0 16px;图片是相对默认位置向下移动了16px,如下图:<...图片...>所以当你去掉background...
2016-10-13
内联元素:
①和其他元素都在一行上;
②高,行高及外边距和内边距不可改变;
③宽度就是它的文字或图片的宽度,不可改变
④内联元素只能容纳文本或者其他内联元素
①和其他元素都在一行上;
②高,行高及外边距和内边距不可改变;
③宽度就是它的文字或图片的宽度,不可改变
④内联元素只能容纳文本或者其他内联元素
强迫症表示受不了ad那图的白边, 自己切了一下,大伙拿去用 :
http://pan.baidu.com/s/1gfqg3jt
http://pan.baidu.com/s/1gfqg3jt
2016-10-12
强迫症表示微信图标不整齐。很揪心,下面是解决的代码:
html代码: <li class="copyright_title">
<li class="copyright_foot">
css代码: .copyright_title img{
margin-bottom: -10px;}
.copyright_foot img{
margin-top: 8px;
}
html代码: <li class="copyright_title">
<li class="copyright_foot">
css代码: .copyright_title img{
margin-bottom: -10px;}
.copyright_foot img{
margin-top: 8px;
}
2016-10-12
老师,你把那个放大镜当做背景图片放在那个文本框里面是不是不合适啊?因为一般网页的放大镜点击是相当于搜索的。可不可以把放大镜通过定位的方式放到文本框里面啊?
2016-10-12