清除浮动

浮动元素对父级和兄弟级元素造成的影响:父级会坍塌,虽然不会超过兄弟块的最低上界,但是会使后面快的内容浮动在它的周围。
1.清除浮动:
浮动元素会自动设置为块级元素,块级元素能设置宽和高,而行内元素则不可以
clear:left/right/both;不允许元素的哪一侧不允许存在其他浮动元素。
float会影响别的元素:1如果是附近是块级元素,则会覆盖块级元素,(记住覆盖两个字)
2.如果附近是行内元素,则行内元素会浮在周围,为浮动元素留有空间,就算浮动元素遮盖掉一个块级元素,那么块级元素内的文字也会浮动在浮动元素周围。这样可以做css2的三栏布局。
3.浮动元素的父元素坍塌!!(属于子元素都是浮动元素,所以要加个<div clear:both>清除浮动)
至于清楚浮动,影响的只是浮动元素本身,而且并没有清楚本身的float元素,只是换了种情况。
例如div1,div2都是左浮动,则div2会在1的左边,此时如果对div2进行clear:left,意思是不允许div2左边有浮动元素,但因div1又是浮动的,又不能覆盖它,所以div2只能换行,去了div1的下面,这样左边既没有浮动元素,又没有覆盖div1.
右浮动同理
2.关于设置浮动后其他元素的显示情况
https://blog.csdn.net/tanga842428/article/details/77799951
3.clear:both的主要作用是撑开父元素?因为独占一行?又能清除浮动又能撑开父元素。这样就也是占位的一种方式。该属性的值指出了不允许有浮动对象的边。这个属性是用来控制float属性在文档流的物理位置的。即既不影响旁边的元素,又能左浮动。
当属性设置float(浮动)时,其所在的物理位置已经脱离文档流了,但是大多时候我们希望文档流能识别float(浮动),或者是希望float(浮动)后面的元素不被float(浮动)所影响,这个时候我们就需要用clear:both;来清除。
常见的几种方式:
https://blog.csdn.net/Inuyasha1121/article/details/44815779
(1)


(2).clearfix:after {
content: “.”; //为元素的内容为空,则不能显示在页面当中
display: block;//设置为块级元素,相当于兄弟元素,若为浮动元素后面的兄弟元素,则清除浮动时会自动换行到下一行,这样浮动元素就独占一行,就会把内容撑开。
height: 0;//设置高度为0,为了不破坏布局。
clear: both;//清除为元素周围的浮动。
visibility: hidden; //不让内容.显示在页面上
}

/*需要对父级*/
这个css的原理是经过使用after伪对象,它将在应用clearfix的元素结尾添加content中的内容,也就是一个".",并且把他设置为块级元素(display="block");高度设置为0,clear="both",然后将其内容隐藏掉(visibility="hidden").这样就会撑开此块级元素.

但是,IE并不支持.所以如果你需要兼容IE浏览器的话,可以设定以个Hack.
(3)
.clearfix:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}

  • html .clearfix {zoom: 1;}

2.行内元素与块级元素的区别之一就是 对于行内元素来说margin只有margin-left和margin-right有效,padding只有padding-left和padding-right有效

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值