网站开发客户提供素材,广东微信网站制作报价表,c 做网站怎么发布,龙岗商城网站建设CSS里的浮动#xff0c;可以让元素脱离标准流#xff0c;从左上角或右上角依次贴边排列。下面这个案例将会帮我们了解浮动的基本情况。下面这段代码块#xff0c;外面是一个大div#xff0c;里面包含着3个div#xff0c;第一个左浮动#xff0c;后两个无浮动。//style样式…CSS里的浮动可以让元素脱离标准流从左上角或右上角依次贴边排列。下面这个案例将会帮我们了解浮动的基本情况。下面这段代码块外面是一个大div里面包含着3个div第一个左浮动后两个无浮动。//style样式.a{width: 500px;height: 500px;background-color: pink;}.a1{width: 100px;height: 100px;float: left;background-color: red;}.a2{background-color: blue;}.a3{background-color: yellow;}
//body部分
div classadiv classa1a1/divdiv classa2a2/divdiv classa3a3/div
/div它的运行结果是全部代码见文章最后的附录代码块中的“第一张图片.html”在上图中a2和a3的区域只被展示了一部分还有一部分被a1层叠压在下面了。这是因为a2和a3都没有设置width和height所以宽度会自动充满整个父容器而因为a1脱离了标准流所以a2和a3可以继续使用被a1压住的空间。而它们的Height也没有设置其默认值是auto也就是自适应所以a3和a3的高度都是文字的行高。那么a2和a3中的文字为什么没有被a1压在底下呢这是因为文字会自动避开浮动元素一定要让自己显示出来所以a2和a3中的文字才会被我们看到。这时候如果在a2中加1个clear:both属性即让a2不再受之前的浮动元素的影响即a2认为之前的元素都是普通元素而不是浮动元素这样a2便认为哦a1就是个非常普通的块元素那a2自然要显示在a1的下一行了如下图。全部代码见文章最后的附录代码块中的“第二张图片.html”下面我们看点复杂点的例子。在下面的代码中我们创建了两个大div每个大div中有4个小div每个小div都是向左浮动的。它们的尺寸、颜色如代码块所示。//CSS样式* {padding: 0;margin: 0;}.a{width: 500px;border: 2px solid red;margin-bottom: 20px;}.b{width: 500px;border: 2px solid blue;}.a1{width: 100px;margin-right: 10px;height: 100px;float: left;background-color: pink;border: 2px solid red;}.b1{width: 100px;margin-right: 10px;height: 30px;float: left;background-color: yellow;border: 2px solid blue;}
//body部分
div classadiv classa1/divdiv classa1/divdiv classa1/divdiv classa1/div
/div
div classbdiv classb1/divdiv classb1/divdiv classb1/divdiv classb1/div
/div那他们的运行结果如何呢?是下面这样的。全部代码见文章最后的附录代码块中的“第三张图片.html”两个大div我们只能看到两条线这是因为它们没有设置高度即自适应被里面的元素撑开但是实际上又没有被撑开因为子div都脱离了标准流所以才撑不开大div于是大div的height就是0红蓝长线分别是它们的border而且是两倍的border因为高度是0所以上下border碰在一起了。红线和蓝线之间有大约20px的距离这是我们给第一个大div设置的margin-bottom:20px在起作用。而黄色的div们之所以跑到了图中的位置从第一个黄div说起吧它其实想贴最后一个粉红div的右边框但显然第二个大div的剩余宽度要比它的宽度要小所以它过不去于是又去尝试贴第3个、2个、1个粉红div的边显然都做不到于是它只能去粉红div的下一行贴父元素的左边框了。而后面的黄div则依次贴它的边。如果我们把第一个黄小div的宽度缩小到可以到上一行贴边效果就会像下面这样全部代码见文章最后的附录代码块中的“第四张图片.html”而如果第二个大div足够宽其内部的div也都能够直接贴第4个粉红div的右边框了如下图。全部代码见文章最后的附录代码块中的“第五张图片.html”全部代码见链接中的“第一张图片.html”那么怎样才能如我们所愿正常显示两个大div包含着4个小div呢第一种方法是给大div设置height。本来我们让height自适应但因为小div脱离了标准文档流所以无法撑开大div那我们给大div设置height显然就解决了。即在两个大div的样式中加一行height:150px;只要该值大于其内部小div的高度即可起到效果如下图所示全部代码见文章最后的附录代码块中的“第六张图片.html”但是这样我们就无法实现高度自适应了只能让height是个定值因此稍有缺陷。那我们尝试另一种思路即用clear属性来清除float对下面元素带来的影响。首先说外墙法就是在两个大div之间放一个大div写上clear:both。这样效果就会如下图所示全部代码见文章最后的附录代码块中的“第六点无张图片.html”这个是后期补充的内容上图中红蓝长线之间隔着一个高度是0的div这个div唯一的作用就是清除上文的浮动。也就是说这个div本身会觉得上文都是正常的所以会贴着粉红子盒子的下边排列。但是这个方法起到的作用很有限就只是让下面的大div会排列在粉红盒子的下边以后而已。下面介绍最主流、好用我自己觉得的方法内墙法。内墙法就是在大盒子里最后一个浮动的子盒子后面加一个子盒子让其属性值clear:both。全部代码见文章最后的附录代码块中的“第七张图片.html”这个图才是我们一般情况下最想要的样式哦。实际上在上图中两个外层大盒子的下边框上方都有一个我们看不到的属性为clear的子盒子因为我们没有设置宽高所以宽会充满整个外层大盒子而高会自适应而我们又没有设置内部元素所以撑不开height是0且我们没有设置border自然这个盒子我们就看不到了。如果我们给它设置下border为黑色那么就能看到这个div了如下图可以清晰地看到黑色边框。全部代码见文章最后的附录代码块中的“第八张图片.html”需注意如果不设置border只设置background-color我们还是看不到因为height是0所以自然也没法显示bgcolor了。但实际上内墙法也有缺陷样式上是好看了但是从语义上多了一个没有内容也机会没有用的元素很多人认为是在结构上是不值得提倡的。你还有哪些问题呢可以在评论区参与讨论哦~附录以上8张图片的完整代码第一张图片!DOCTYPE html
html langen
headmeta charsetUTF-8titleday2 clear1/titlestyle typetext/css.a{width: 500px;height: 500px;background-color: pink;}.a1{width: 100px;height: 100px;float: left;background-color: red;}.a2{background-color: blue;/*clear: both;*/}.a3{background-color: yellow;}/style
/head
body
div classadiv classa1a1/divdiv classa2a2/divdiv classa3a3/div
/div
/body
/html第二张图片!DOCTYPE html
html langen
headmeta charsetUTF-8titleday2 clear1/titlestyle typetext/css.a{width: 500px;height: 500px;background-color: pink;}.a1{width: 100px;height: 100px;float: left;background-color: red;}.a2{background-color: blue;clear: both;}.a3{background-color: yellow;}/style
/head
body
div classadiv classa1a1/divdiv classa2a2/divdiv classa3a3/div
/div
/body
/html第三张图片!DOCTYPE html
html langen
headmeta charsetUTF-8title3/titlestyle typetext/css* {padding: 0;margin: 0;}.a{width: 500px;border: 2px solid red;margin-bottom: 20px;}.b{width: 500px;border: 2px solid blue;}.a1{width: 100px;margin-right: 10px;height: 100px;float: left;background-color: pink;border: 2px solid red;}.b1{width: 100px;margin-right: 10px;height: 30px;float: left;background-color: yellow;border: 2px solid blue;}/style
/head
body
div classadiv classa1/divdiv classa1/divdiv classa1/divdiv classa1/div
/div
div classbdiv classb1/divdiv classb1/divdiv classb1/divdiv classb1/div
/div
/body
/html第四张图片!DOCTYPE html
html langen
headmeta charsetUTF-8title3/titlestyle typetext/css* {padding: 0;margin: 0;}.a{width: 500px;border: 2px solid red;margin-bottom: 20px;}.b{width: 500px;border: 2px solid blue;}.a1{width: 100px;margin-right: 10px;height: 100px;float: left;background-color: pink;border: 2px solid red;}.b1{width: 100px;margin-right: 10px;height: 30px;float: left;background-color: yellow;border: 2px solid blue;}#bbb{width: 10px;}/style
/head
body
div classadiv classa1/divdiv classa1/divdiv classa1/divdiv classa1/div
/div
div classbdiv classb1 idbbb/divdiv classb1/divdiv classb1/divdiv classb1/div
/div
/body
/html第五张图片!DOCTYPE html
html langen
headmeta charsetUTF-8title3/titlestyle typetext/css* {padding: 0;margin: 0;}.a{width: 500px;border: 2px solid red;margin-bottom: 20px;}.b{width: 1000px;border: 2px solid blue;}.a1{width: 100px;margin-right: 10px;height: 100px;float: left;background-color: pink;border: 2px solid red;}.b1{width: 100px;margin-right: 10px;height: 30px;float: left;background-color: yellow;border: 2px solid blue;}/style
/head
body
div classadiv classa1/divdiv classa1/divdiv classa1/divdiv classa1/div
/div
div classbdiv classb1/divdiv classb1/divdiv classb1/divdiv classb1/div
/div
/body
/html第六张图片!DOCTYPE html
html langen
headmeta charsetUTF-8title3/titlestyle typetext/css* {padding: 0;margin: 0;}.a{width: 500px;border: 2px solid red;margin-bottom: 20px;height: 150px;}.b{width: 500px;border: 2px solid blue;height: 150px;}.a1{width: 100px;margin-right: 10px;height: 100px;float: left;background-color: pink;border: 2px solid red;}.b1{width: 100px;margin-right: 10px;height: 30px;float: left;background-color: yellow;border: 2px solid blue;}/style
/head
body
div classadiv classa1/divdiv classa1/divdiv classa1/divdiv classa1/div
/div
div classbdiv classb1/divdiv classb1/divdiv classb1/divdiv classb1/div
/div
/body
/html第六点五张图片!DOCTYPE html
html langen
headmeta charsetUTF-8title3/titlestyle typetext/css* {padding: 0;margin: 0;}.a{width: 500px;border: 2px solid red;margin-bottom: 20px;}.b{width: 500px;border: 2px solid blue;clear: left;}.a1{width: 100px;margin-right: 10px;height: 100px;float: left;background-color: pink;border: 2px solid red;}.b1{width: 100px;margin-right: 10px;height: 30px;float: left;background-color: yellow;border: 2px solid blue;}.cl{clear: both;}/style
/head
body
div classadiv classa1/divdiv classa1/divdiv classa1/divdiv classa1/div
!-- div classcl/div--
/div
div classcl/div
div classbdiv classb1/divdiv classb1/divdiv classb1/divdiv classb1/div
!-- div classcl/div--
/div
/body
/html第七张图片!DOCTYPE html
html langen
headmeta charsetUTF-8title3/titlestyle typetext/css* {padding: 0;margin: 0;}.a{width: 500px;border: 2px solid red;margin-bottom: 20px;}.b{width: 500px;border: 2px solid blue;clear: left;}.a1{width: 100px;margin-right: 10px;height: 100px;float: left;background-color: pink;border: 2px solid red;}.b1{width: 100px;margin-right: 10px;height: 30px;float: left;background-color: yellow;border: 2px solid blue;}.cl{clear: both;}/style
/head
body
div classadiv classa1/divdiv classa1/divdiv classa1/divdiv classa1/divdiv classcl/div
/div
div classbdiv classb1/divdiv classb1/divdiv classb1/divdiv classb1/divdiv classcl/div
/div
/body
/html第八张图片!DOCTYPE html
html langen
headmeta charsetUTF-8title3/titlestyle typetext/css* {padding: 0;margin: 0;}.a{width: 500px;border: 2px solid red;margin-bottom: 20px;}.b{width: 500px;border: 2px solid blue;clear: left;}.a1{width: 100px;margin-right: 10px;height: 100px;float: left;background-color: pink;border: 2px solid red;}.b1{width: 100px;margin-right: 10px;height: 30px;float: left;background-color: yellow;border: 2px solid blue;}.cl {clear: both;border: 2px solid black;}/style
/head
body
div classadiv classa1/divdiv classa1/divdiv classa1/divdiv classa1/divdiv classcl/div
/div
div classbdiv classb1/divdiv classb1/divdiv classb1/divdiv classb1/divdiv classcl/div
/div
/body
/html
