css怎么让子元素突破父元素设定的宽高,body{width:1000px;},子元素{width:100%}不起作用,新手请教

html-css021

css怎么让子元素突破父元素设定的宽高,body{width:1000px;},子元素{width:100%}不起作用,新手请教,第1张

body通常都是整个页面的最大父级,而子元素设置宽度或者高度100%只是相邻的父级,况且你还设的宽度width:100%,那么就表示子元素的宽度等于父级的宽度,那你怎么可能会突破?要想突破,那你解除两者的父子级关系或者把子元素“独立”出来,比如给子元素加相对或者绝对定位position,再设置宽度高度就能解决

<div>

<p>浮动1</p>

<p>浮动2</p>

</div>

div{width: 99px}

p{width: 50pxline-height: 30px}

如果 css 是上面这样的话,两个 p 宽度超过父级了必须换成两行,你加什么都没用;

正确的方法是父 div 的 99px 改为 100px 或以上才能在同一排容纳这两个 p;

clear 是拿来清理浮动的,而不是解决浮动元素总宽度超过父宽度换行问题的,只能说这个作者在放屁。

你尝试把上面 css 中 div 宽度改成100px,并且给 div 加条个红色背景。然后到 Firefox 或 CH、OP、WK 等浏览器下面去看,你的 div 的红色背景在哪儿?你将看不到整个红色背景的 div 区域在高度上完整的包裹住那两个 p。

因为 float 浮动后,实际上也是把 p 从文档流里面拖出来了,父 div 就失去了范围焦点。而 clear 清除浮动作用之一就是拿来解决这个问题:让父 div 正确的包裹浮动子元素,而不是你看那个教程说那样。

IE 下微软的程序员画蛇添足的解决了这个问题,如果你没用 clear 或其他方式清理浮动,ie 会自己帮你搞定这个父级高度上无法包含浮动子元素的问题。但是现在不是 ie 一家独大了,大多数时候你浮动了元素都应该养成习惯清理浮动。

宽度在不需要写的时候不要写,像100%这种就不用写,因为子级的宽度会继承父级的宽度,当你div1的宽度设置为100%的时候,div2的宽度也是100%,但是你不设置div1的时候,div1的宽度也是100%;但是你不设置就不会影响到div2,这样当你div2设置margin的时候也没有多大的问题,不过更建议你用padding,在网页制作的时候能用padding就不用margin,margin容易出错,会有bug;以上说的是常规方法,在css3里边有一个clac方法,就算你用100%,也可以计算出div2的宽度,你可以百度找一下“css3 clac()方法”,有很多讲解的文章,建议看看。