css浮動十酣,定位問題解答

1涩拙、浮動的元素有什么特征?對父容器及其子元素耸采、普通元素兴泥、文字有什么影響?

浮動的元素在不清除浮動的情況下會脫離正常的文檔流虾宇,將不再文檔流中占據(jù)位置搓彻;
如果浮動的元素為子元素的情況下父元素沒有定義固定寬度和高度則父元素降抓取不到浮動的子元素的內容,造成父元素的塌陷;

由于元素浮動后不在占據(jù)文檔流的位置好唯,所以與其相鄰的兄弟元素則會被浮動的元素覆蓋竭沫,如果兄弟元素也進行了浮動那么將會緊跟在上一浮動元素后面;(如果想讓未浮動的兄弟元素覆蓋在以浮動的元素上那么久要用到z-index配合定位來解決這個問題)骑篙;如果浮動后父元素寬度已經(jīng)不能容納浮動后水平的所有子元素的寬度那么其它浮動塊兒向下移動,直到有足夠的空間,如果浮動元素的高度不同,那么向下移動的時候可能被卡淄商帷;如果浮動的元素高度不相同當元素下移時下移的元素會卡在高度最小的不下移元素靶端;

對于文字谎势,如果兩個兄弟元素第一個進行了浮動,第二個有內容且沒有進行浮動那么除了第一個元素將覆蓋第二個元素外杨名,第二個元素的文字將會圍繞第一個以浮動元素的四周進行顯示脏榆;

如果一個內聯(lián)元素浮動后即使清除了浮動,此內聯(lián)元素就可以設置width台谍,height须喂,margin,padding 值趁蕊;

2坞生、清除浮動指的是什么?如何清除以及方法掷伙?

浮動后的元素需要清除浮動是己,讓原本已經(jīng)脫離正常文檔流的元素重新回歸正常文檔流當中,避免塌陷任柜;
對于css有一個特定的清除浮動的屬性此屬性 clear 具有三個常用值分別為:left卒废、right、both宙地;代表清除左邊浮動摔认、清除右邊浮動、浮動全部清除宅粥;一般常用的是clear:both; 此方法可用在最后一個浮動的元素下在增加一行代碼來清除:
<div class="big">
<div style="float: left"></div>
<div style="float: left"></div>
<div style="float: left"></div>
<div style=" clear: both;"></div>
</div>

另外除了上面的方法還有一些清除浮動的方法在BFC模式下利用以下方法均可:
float為 left|right参袱;
overflow為 hidden|auto|scroll;
display為 table-cell|table-caption|inline-block粹胯;
position為 absolute|fixed蓖柔;

3辰企、有幾種定位方式风纠,分別是如何實現(xiàn)定位的,參考點是什么牢贸,使用場景分別是竹观?

常用的positionde的值如下圖:

微信截圖_20170724100820.png

常用的值有三個分別是:position: relative; position: absolute; position: fixed;
position: relative: 使用場景一般為relative可能就要相對于父結點進行定位了一般都是相對定位坯沪;
position: absolute:需要把一個元素始終固定在頁面的一個位置時使用媒怯;
position: fixed:比如有些div懸浮在上方,可能就需要fixed,也就是滾動條移動時不會改變與瀏覽器的位子念赶;

4、position:relative和負margin都可以使元素位置發(fā)生偏移二者區(qū)別是什么启涯?

position:relative困肩;是根據(jù)元素目前的位置進行定位,利用left,right,top,bottom進行位置的改變是針對元素本身來移動并且原來的位置依然占位拗窃;
負margin會把元素上移瞎领、左移,同時文檔流中的位置也發(fā)生相應變化,但是不在占據(jù)原來的位置随夸;

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末九默,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子宾毒,更是在濱河造成了極大的恐慌驼修,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,123評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件诈铛,死亡現(xiàn)場離奇詭異乙各,居然都是意外死亡,警方通過查閱死者的電腦和手機癌瘾,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,031評論 2 384
  • 文/潘曉璐 我一進店門觅丰,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人妨退,你說我怎么就攤上這事妇萄。” “怎么了咬荷?”我有些...
    開封第一講書人閱讀 156,723評論 0 345
  • 文/不壞的土叔 我叫張陵冠句,是天一觀的道長。 經(jīng)常有香客問我幸乒,道長懦底,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,357評論 1 283
  • 正文 為了忘掉前任罕扎,我火速辦了婚禮聚唐,結果婚禮上,老公的妹妹穿的比我還像新娘腔召。我一直安慰自己杆查,他們只是感情好,可當我...
    茶點故事閱讀 65,412評論 5 384
  • 文/花漫 我一把揭開白布臀蛛。 她就那樣靜靜地躺著亲桦,像睡著了一般崖蜜。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上客峭,一...
    開封第一講書人閱讀 49,760評論 1 289
  • 那天豫领,我揣著相機與錄音,去河邊找鬼舔琅。 笑死等恐,一個胖子當著我的面吹牛,可吹牛的內容都是我干的备蚓。 我是一名探鬼主播鼠锈,決...
    沈念sama閱讀 38,904評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼星著!你這毒婦竟也來了购笆?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 37,672評論 0 266
  • 序言:老撾萬榮一對情侶失蹤虚循,失蹤者是張志新(化名)和其女友劉穎同欠,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體横缔,經(jīng)...
    沈念sama閱讀 44,118評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡铺遂,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,456評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了茎刚。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片襟锐。...
    茶點故事閱讀 38,599評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖膛锭,靈堂內的尸體忽然破棺而出粮坞,到底是詐尸還是另有隱情,我是刑警寧澤初狰,帶...
    沈念sama閱讀 34,264評論 4 328
  • 正文 年R本政府宣布莫杈,位于F島的核電站,受9級特大地震影響奢入,放射性物質發(fā)生泄漏筝闹。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,857評論 3 312
  • 文/蒙蒙 一腥光、第九天 我趴在偏房一處隱蔽的房頂上張望关顷。 院中可真熱鬧,春花似錦武福、人聲如沸议双。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,731評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽聋伦。三九已至,卻和暖如春界睁,著一層夾襖步出監(jiān)牢的瞬間觉增,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,956評論 1 264
  • 我被黑心中介騙來泰國打工翻斟, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留逾礁,地道東北人。 一個月前我還...
    沈念sama閱讀 46,286評論 2 360
  • 正文 我出身青樓访惜,卻偏偏與公主長得像嘹履,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子债热,可洞房花燭夜當晚...
    茶點故事閱讀 43,465評論 2 348

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案砾嫉? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,734評論 1 92
  • 一焕刮、文檔流的概念指什么?有哪些方式可以讓元素脫離文檔流? 文檔里指元素在文檔中的位置由元素在html里的位置決定墙杯,...
    dengpan閱讀 535評論 0 3
  • 浮動 CSS允許浮動任何元素配并。 浮動元素 首先,會以某種方式將浮動元素從文檔的正常流中刪除高镐,不過它還是會影響布局溉旋。...
    exialym閱讀 1,211評論 0 6
  • 1.浮動元素有什么特征算行?對父容器恕沫、其他浮動元素、普通元素纱意、文字分別有什么影響? 何謂浮動元素婶溯?有什么特征?所謂浮動...
    草鞋弟閱讀 809評論 0 1
  • 今天心情好偷霉,碼個總結迄委,捋捋今年的收獲。 生命中多點儀式感也是好的类少。 思維心態(tài) 今年在思維心態(tài)上的收獲有五點叙身。 1)...
    喵喵僧閱讀 454評論 2 6