小游戏网站建设,麻涌网站建设公司,从化建网站,专业集团门户网站建设企业浮动设计初衷
类似报纸的布局栏#xff0c;浮动是为了让图片嵌在文本流中#xff0c;文本不会覆盖图片#xff0c;但早期布局只有浮动#xff0c;因此将浮动用于布局#xff0c;后来才有了display:inline-block display: table flexbox和网格布局等
基本代码
html浮动是为了让图片嵌在文本流中文本不会覆盖图片但早期布局只有浮动因此将浮动用于布局后来才有了display:inline-block display: table flexbox和网格布局等
基本代码
htmlheadstyle:root {box-sizing: border-box;}*,::before,:;after {box-sizing: inherit;}body {background-color: #eee;font-family: Helvetica, Arial, sans-serif;}body * * {margin-top: 1.5em;}header {padding: 1em 1.5em;color: #fff;background-color: #0072b0;border-radius: .5em;margin-bottom: 1.5em;}.main {padding: 0 1.5em;background-color: #fff;border-radius: .5em;}/style/headbodydiv classcontainerheaderh1TJH Special Club/h1/headermain classmain clearfixh2Running Tips/h2divdiv classmediaimg classmedia-image srcrunner.pngdiv classmedia-bodyh4Strength/h4pStrength train is important/p/div/divdiv classmediaimg classmedia-image srcshoes.pngdiv classmedia-bodyh4Cadence/h4pcadence/p/div/divdiv classmediaimg classmedia-image srcshoes.pngdiv classmedia-bodyh4Transform it/h4pI like running/p/div/divdiv classmediaimg classmedia-image srcrunner.pngdiv classmedia-bodyh4concentrate mind/h4pfocus your mind/p/div/div/div/main/div/body
/html 双容器模式
将内容放入两个嵌套的容器总通过设置内容器的外边距让内容器左右居中
body是外层容器 container是内层容器对内层容器按双容器模式设置样式。发现内容器宽度达到最大宽度然后左右居中
.container {max-width: 1080px;margin: 0 auto;} 是否有必要学习浮动
有 贴近老代码且让图片被文本环绕浮动是少数能实现的方案
容器折叠和清除浮动
容器折叠
将四个media浮动到容器左侧。发现四个media好像跑到了容器外边是因为浮动元素的高度不会加给父元素上不过这恰恰符合浮动的初衷浮动是为了让图片被文本环绕所以图片高度不会加给父元素
.media {float: left;width: 50%;padding: 1.5em;background-color: #eee;border-radius: .5em;} 这并不是我们想要的我们想要四个媒体元素都被包含在容器元素中
方法1
使用clear属性。需要将一个元素放到容器元素内的末尾元素这会让容器元素扩展到该元素的下方 通俗理解一个浮动图片会被文字环绕如果清除浮动则该图片自成一行不再被文字环绕
理解清除浮动
可以用伪元素取代额外增加的div元素清除浮动可以叫clearfix
伪元素是一种特殊的选择器以双冒号::开头最常用的伪元素是::before ::after
.clearfix::after {display: block;content: ;clear: both;}
浮动元素外边距在容器内不会被折叠而容器内非浮动元素外边距会被折叠runnering tips紧贴最上边 通过对容器内第一个和最后一个元素设置属性避免外边距折叠
.clearfix::before,.clearfix::after {display: table;content: ;} clear清除浮动只对块元素有效所以可以用display: table但不能display:table-cell
